使用jQuery纠正“全选”复选框

问题描述

| http://briancray.com/tests/checkboxes/index.html 实现全选的方法很简单，但并不完美。全选和取消全选工作正常，但是在全选状态下，如果您取消选中一项，则也会选中全选。如何纠正？   然后 仍选中“全部检查”。如何纠正？     

解决方法

        警告，无耻的自我提升。 我已经为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/     ,        这是我的看法。

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;
});

这样，即使您手动选中所有子框，ѭ3也会被选中。 http://jsfiddle.net/T4EK2/     ,        您还需要处理子复选框的状态更改。 尝试这个：

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

    ,        好的，已经有类似的答案。无论如何，我都会发布此信息，因为我花了一些时间使它起作用并学习了一些新知识。不适用于v1.6 http://jsfiddle.net/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并说\'surprise \'）。 感谢@Matt Ball