jquery複選框組檢查/取消選中只能工作一次

Question

我有一個有多個複選框組的jQuery腳本。如果選擇了「家長」，則還應選擇所有「孩子」框，並且如果有任何「孩子」框未被選中，則「家長」也應該被取消選擇，並且只有選中的「孩子」框被選中。

這裏是一個的jsfiddle：http://jsfiddle.net/9NmE7/

的問題是，與jQuery 1.4.2這個曾經工作的偉大，但由於升級到1.10.2它仍然有效，但只有一次。意思是，如果你點擊'家長1'，它就可以工作。然後，您取消選擇「家長1」並且它也可以工作，但是如果您再次點擊「家長1」再次選擇它，則不再有效。

這裏有什麼問題？

以防萬一，這裏是HTML：

<form> 
<fieldset> 
<input type="checkbox" class="parentCheckBox" /> Parent 1<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-1<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-2<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-3<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-4<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-5<br /> 
</fieldset> 
<fieldset> 
<input type="checkbox" class="parentCheckBox" /> Parent 2<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-1<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-2<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-3<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-4<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-5<br /> 
</fieldset> 
<fieldset> 
<input type="checkbox" class="parentCheckBox" /> Parent 3<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-1<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-2<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-3<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-4<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-5<br /> 
</fieldset> 
</form> 

而jQuery的：

$(document).ready(
    function() { 
     //clicking the parent checkbox should check or uncheck all child checkboxes 
     $(".parentCheckBox").click(
      function() { 
       $(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('checked', this.checked); 
      } 
     ); 
     //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox 
     $('.childCheckBox').click(
      function() { 
       if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false) 
        $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false); 
       if (this.checked == true) { 
        var flag = true; 
        $(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
         function() { 
          if (this.checked == false) 
           flag = false; 
         } 
        ); 
        $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag); 
       } 
      } 
     ); 
    } 
); 

Answer 1

只是更改以下行代碼中的

$(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('checked', this.checked); 

附：

$(this).parents('fieldset:eq(0)').find('.childCheckBox').prop('checked', this.checked); 

Answer 2

使用.prop()而不是.attr()

Working fiddle

.prop('checked', this.checked); 

元素的屬性和屬性之間存在差異。該屬性是初始狀態，屬性是當前狀態 。

您正在設置選項的屬性，該選項僅在 元素沒有要開始的屬性時才起作用。之後， 屬性接管並且設置該屬性不再對 當前狀態產生影響。

當你想改變選擇狀態，你要設置的 屬性而不是屬性：

讀.prop() vs .attr()

Answer 3

我的代碼很辛苦，但是我想出了這個可能更容易閱讀的代碼。其他人說的.prop()和.attr()是真的。

我認爲這會按照你喜歡的方式工作。

$('fieldset') 
    .on('change', '.parentCheckBox', function(){ 

    var $parentCheckBox = $(this), 
     $childCheckBoxes = $parentCheckBox.closest('fieldset').find('.childCheckBox'); 

    if($childCheckBoxes.filter(':checked').length > 0){ 
     $childCheckBoxes.prop('checked', false); 
     $parentCheckBox.prop('checked', false); 
    } else { 
     $childCheckBoxes.prop('checked', true); 
    } 

    }) 
    .on('change', '.childCheckBox', function(){ 

    var $this = $(this) 
     $childCheckBoxes = $this.closest('fieldset').find('.childCheckBox'), 
     $parentCheckBox = $this.closest('fieldset').find('.parentCheckBox'), 
     allSelected = $childCheckBoxes.filter(':checked').length === $childCheckBoxes.length; 

    $parentCheckBox.prop('checked', allSelected); 

    }); 

這裏的快速演示：http://jsbin.com/eriSaha/4/edit?js,output