포장 된 입력 라디오의 Jquery 이벤트가 'checked'이벤트를 대체합니다.

Question

"xtx"를 클릭했지만 기본 입력 이벤트를 보존 할 때을 선택하고 선택을 해제하려면 (x)

내 코드 시도 :

시도해보기 1 : http://jsfiddle.net/UJXRu/

시도해보기 2 : http://jsfiddle.net/UJXRu/1/

시도해보기 3 : http://jsfiddle.net/UJXRu/2/

미리보기 :

$("td").click(function(e) { 
    if (!$(e.target).is("input")) { 
     var bool = !$(this).children("input").is(':checked'); 
     $(this).children("input").attr("checked", bool) 
    } 
    else{ 
     var bool2 = !$(e.target).is(':checked'); 
     $(e.target).attr('checked',bool2); 
    } 
}); 

Answer 1

이 jsfiddle에 ..

$("td").click(function(e) { 
    if (e.target.type !== 'radio') { 
     $(this).find(":radio").trigger('click'); 
    } 
}); 

예를 이것 좀보십시오.

당신은 TD와 라디오 버튼 라디오가이 같은 것을 할 수있는 속성을 확인 전환 확인하려면 :

$("td").toggle(function() { 
    $(this).children(":radio").attr("checked", true); 
}, function() { 
    $(this).children(":radio").attr("checked", false); 
}); 

예

Answer 2

왜 그냥 입력 태그의 기본 클릭 이벤트를 호출 td 또는 라디오 버튼을 모두 클릭하면 라디오 버튼을 확인하고 싶습니다. "

은 간단해야합니다

$("td").click(function(e) { 
    $(this).find("input").attr("checked", true); 
}); 

http://jsfiddle.net/lukemartin/UJXRu/3/

Answer 3

귀하의 코멘트에 응답 :

"

$("td").click(function(e) { 
    if (!$(e.target).is("input")) { 
     var bool = !$(this).children("input").is(':checked'); 
     $(this).children("input").attr("checked", bool) 
    } 
    else{ 
     var bool2 = !$(e.target).is(':checked'); 
     $(e.target).attr('checked',bool2); 
    } 
}); 

Answer 4

jsfiddle의이 대답은 체크 등의 라디오 버튼을 취급하지 않습니다 -boxes (사용자는 실제로 그런 것을 좋아하지 않습니다) 약간 더 현실적인 시나리오를 제공하려고 시도합니다.

$("tr.myRow").click(function(e) { 
    // dont override the radio inputs default 
    if ($(e.target).hasClass("childRadio") || e.target.tagName == 'LABEL') 
     return; 

    // find the child radio, and if it's not checked, check it. 
    var $childRadio = $("input.childRadio", $(this)); 
    if (!$childRadio.attr('checked')) { 
     $childRadio.attr('checked', 'checked'); 
    } 
}); 

내가 레이블을 추가하는 문제에 갔어요, 라디오 버튼 (라디오 버튼이있는 이유입니다) 그룹화되도록 이름 속성을 사용했다. 따라서 가능한 한 많은 기본 동작을 유지하고 클릭만으로 특정 하위 라디오 버튼을 선택합니다.

html 샘플은 아래에 있습니다.

<tr class="myRow"> 
    <td> 
     <div>Some Content</div> 
     <div> 
      <label for="radio1">Radio 1 Label</label> 
      <input type='radio' id="radio1" class="childRadio" checked="checked" name="Group1"> 
     </div> 
     <div>More Content</div> 
    </td> 
</tr> 
<tr class="myRow"> 
    <td> 
     <div> 
      <label for="radio2">Radio 2 Label</label> 
      <input type='radio' id="radio2" class="childRadio" name="Group1"> 
     </div> 
    </td> 
</tr>