jquery将div设置为切换复选框，单击复选框本身

Question

我有这个复选框：

<div class="OuterDiv">
   <div class="InnerDiv">
      <input type="checkbox" name="tie" value="tie">Error in tie score<br>
   </div>
</div>

我有这个jquery来切换复选框：

$(document).ready(function() {
   $('.OuterDiv').click(function() {
      if ($(this).find('input:checkbox').is(':checked')) { 
         $(this).find('input:checkbox').attr('checked',false);
      } else {
         $(this).find('input:checkbox').attr('checked',true);
      }
   });
});

这似乎有效，在点击div时切换复选框。但是，当我单击复选框本身时，没有任何反应，也没有切换。

Answer 1

输入周围没有<label>（整个DIV可点击）请转到：

的 LIVE DEMO

$(document).ready(function() {

   $('.OuterDiv').click(function(e) {
     var $chkb = $(':checkbox', this)[0];
     if(e.target !== $chkb) $chkb.checked = !$chkb.checked; 
   });

});

（没有JS：）
另外，如果您只想让checkbox旁边的文字可点击：
的 LIVE DEMO

<div class="OuterDiv">
   <div class="InnerDiv">
     <label>
      <input type="checkbox" name="tie" value="tie">Error in tie score<br>
     </label>
   </div>
</div>

Answer 2

您需要使用event.stopPropagation()

停止通过复选框冒泡的事件传播

$('input[type=checkbox]').click(function(e){
    e.stopPropagation();
});

Answer 3

您不需要为此使用jQuery。只需使用标签，如下所示：

<div class="OuterDiv">
    <label>
        <input type="checkbox" name="tie" value="tie">Error in tie score
    </label>
</div>