Question

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

实现全选的方法很简单，但并不完美。 select all和unselect all工作正常，但是当选择all all状态时，如果取消选中一个，则select all也会被选中。如何纠正？

enter image description here

然后

enter image description here

仍然选中“全部检查”。如何纠正？

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

这是我的看法。

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 3

您还需要处理子复选框的状态更改。试试这个：

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

好的，已有类似的答案。无论如何我会发布这个，因为我花了一些时间让它工作并学习新东西。 ~~不适用于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并说'惊喜'）。感谢@Matt Ball

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

4 个答案: