Question

我有以下功能，通过选择一个

来检查/取消选中页面上的所有复选框

$("#checkall").click(function() {
    var checked_status = this.checked;
    $("input:checkbox").each(function() {
        this.checked = checked_status;
    });
});

我需要修改它，如果通过单击checkall选择所有选项然后取消选中一个，则#checkall也会被取消选中。或者我需要为此创建一个单独的函数吗？

当选择了NONE的复选框时，我需要将一个类添加到另一个元素。

$("#myElement").addClass("disabled");

把它们放在一起对我来说很复杂。

Answer 1

我会使用更改事件。

这就是你追求的目标吗？：

<div class="checkall">
    <input type="checkbox" id="checkall">
</div>
<div id="list">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

和jquery：

var checkboxes = $(":checkbox", "#list").change(function() {
        var allIsChecked = checkboxes.length === checkboxes.filter(":checked").length;

        checkAll[0].checked = allIsChecked;
});

var checkAll = $("#checkall").change(function() {
        checkboxes.prop("checked",this.checked);
});

demo（如果你使用的是jquery 1.6+）： http://jsbin.com/ezofal/edit

在此链接中添加了#MyElement类切换：http://jsbin.com/ezofal/2/edit

Answer 2

$(document).ready(function(){
    $("#checkall").click(function() {
        var checked_status = this.checked;
        $("input:checkbox").each(function() {
            this.checked = checked_status;
        });
    });
    $('input[type=checkbox]:not(#checkall)').change(function(){
        if($('input[type=checkbox]').length !=  $('input[type=checkbox]:checked').length){
              $('#checkall').attr('checked', false);
        }
    });
});

jsFiddleDemo

Answer 3

var checked_status = false;
$("#checkall").click(function() {
checked_status = this.checked;
$("input:checkbox").each(function() {
    this.checked = checked_status;
});
});
$("input:checkbox").click(function(){
   if(checked_status == true) {
       $('#checkall').checked = false;
   }
});

Answer 4

$("input:checkbox").click(function() {
    var checked_status = this.checked;
    if($(this).is("#checkall")) {
        $("input:checkbox").each(function() {
            this.checked = checked_status;
        });
    } else {
        $("#checkall").attr('checked', ($("input:checkbox:not(#checkall):checked").length ==
                                        $("input:checkbox:not(#checkall)").length));
    }
});

http://jsfiddle.net/N2dH5/1/

测试

@Toukakoukan偷了一些想法

使用/ jQuery检查/取消选中

4 个答案: