正確的「全選」複選框與jQuery

Question

http://briancray.com/tests/checkboxes/index.html

實現全選的方法很簡單，但並不完美。全部選擇和全部取消選擇都可以正常工作，但是在選擇全部狀態時，如果取消選中全部，則選中全部也會被選中。這怎麼可以糾正？

然後

「檢查所有」 仍在檢查。這怎麼可以糾正？

Answer 1

_{警告，無恥的自我推銷提前。}

我寫了一個jQuery的插件，完成這種事情。看一看：http://mjball.github.com/jQuery-CheckAll

要與你鏈接的頁面上的標記使用它：

<form action="#" method="post" id="myform"> 

<fieldset> 
    <div class="radio"><input type="checkbox" name="checkall" id="checkall"> <label for="checkall">Check all</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox1" id="checkbox1"> <label for="checkbox1">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox2" id="checkbox2"> <label for="checkbox2">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox3" id="checkbox3"> <label for="checkbox3">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox4" id="checkbox4"> <label for="checkbox4">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox5" id="checkbox5"> <label for="checkbox5">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox6" id="checkbox6"> <label for="checkbox6">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox7" id="checkbox7"> <label for="checkbox7">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox8" id="checkbox8"> <label for="checkbox8">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox9" id="checkbox9"> <label for="checkbox9">Checkbox</label></div> 
    <div class="radio"><input type="checkbox" name="checkbox10" id="checkbox10"> <label for="checkbox10">Checkbox</label></div> 
</fieldset> 

</form> 

這個就足夠了：

$('#checkall').checkAll('#myform input:checkbox:not(#checkall)'); 

演示：http://jsfiddle.net/mattball/npeTz/

CheckAll正常工作與jQuery 1.4.4和1.5.2。我沒有時間爲jQuery 1.6進行更新。 _對不起。

---

更新的jQuery 1.6兼容性：http://jsfiddle.net/mattball/CVQsp/

---

它仍然有效，即使你不小心選擇主與奴一起：http://jsfiddle.net/mattball/BwFvc/

Answer 2

您需要處理的狀態變化的孩子複選框。 試試這個：

<script type="text/javascript"> 
$(function() { 
    $('#checkall').click(function() { 
     $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked); 
    }); 
     //THIS IS NEW ADDITION TO YOUR CODE 
    $('input[id^="checkbox"]').click(function(){ 
    if(!this.checked){ 
     $('#checkall').attr("checked", false) 
    } 
    }); 
}); 
</script> 

Answer 3

這是我的承擔。

var checkall = $('#checkall'); 
var boxes = $('input[type="checkbox"]').not(checkall); 

checkall.click(function() { 
    boxes.attr('checked', this.checked); 
}); 
boxes.change(function() { 
    checkall[0].checked = this.checked && boxes.filter(':checked').length === boxes.length; 
}); 

這樣checkall得到檢查，即使您手動檢查所有子框。

http://jsfiddle.net/T4EK2/

Answer 4

好，也有類似的答案了。因爲我花了一些時間讓它工作和學習新東西，所以我會發布這個。 不適用於v1.6

http：// jsfiddle。淨/ gsndd/

http://jsfiddle.net/gsndd/2/

$(function() { 
    // Ripped from https://github.com/mjball/jQuery-CheckAll @Matt Ball 
    var propFn = typeof $.fn.prop === 'function' ? 'prop' : 'attr'; 

    $('#checkall').click(function() { 
     $(this).parents('fieldset:eq(0)').find(':checkbox')[propFn]('checked', this.checked); 
    }); 
    $("input[type=checkbox]:not(#checkall)").click(function() { 
     if (!this.checked) { 
      $("#checkall")[propFn]('checked', this.checked); 
     } else { 
      $("#checkall")[propFn]('checked', !$("input[type=checkbox]:not(#checkall)").filter(':not(:checked)').length); 
     } 

    }); 
}); 

編輯：做出同樣的工作，V1.6 +，只是改變 attr到 prop。最終，你最好使用一種適用於兩者的東西。

編輯 - 修復了在任何版本上工作的代碼（假設John不會推出v1.7並且說'驚喜'）。 感謝@Matt Ball