jquery - 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>