Javascript jQuery复选框多选

我有以下代码用于选择多个复选框：

$(document).ready(function() {

    /* All groups functionality */
    $(".allGroups").change(function() {
        var checked = this.checked;
        if (checked == true) {
            $(".group").attr("checked", true);
            $(".c").attr("checked", true);
        }
        if (checked == false) {
            $(".group").attr("checked", false);
            $(".c").attr("checked", false);
        }
    })

    /* Individual Group functionality */
    $(".group").change(function() {
        var checked = this.checked;
        var number = this.value
        var set = '.group-' + number;
        $(set).attr("checked", checked);
    })


} )

我给了“联系人”类

c

和

group-#

。组获取类

group

。 选中所有复选框将获得

。所有组

现在，当不再选中所有内容时，如何实现“全选”复选框自动取消选中

这里有一个jsFiddle:
给你：

只需将其添加到.group change事件：

if($(".group:checked").length < $(".group").length)
{
       $(".allGroups").prop("checked",false);
}

if（$（.group:checked”）.length<$（.group”）.length）
{
$（“.allGroups”）.prop（“选中”，false）；
}

另外，只是一个提示，“checked”现在是一个属性，而不是一个属性，因此您需要使用
prop（）
而不是
attr（）
来操作它：

只需将其添加到.group change事件：

if($(".group:checked").length < $(".group").length)
{
       $(".allGroups").prop("checked",false);
}

if（$（.group:checked”）.length<$（.group”）.length）
{
$（“.allGroups”）.prop（“选中”，false）；
}

另外，只是一个提示，“checked”现在是一个属性，而不是一个属性，因此您需要使用
prop（）
而不是
attr（）
Fiddle:

我还对格式做了一些改进。注意事项：

在if语句中，您永远不需要将任何内容与“真”或“假”进行比较。。。结果将永远是你正在比较的东西！（真==真）->（真）
使用
prop
代替
attr

与其在相同且需要布尔值的if/else语句两端重复代码块，只需将bool结果赋给变量并传递
以下是更新后的JavaScript：

$(document).ready(function() {
    /* All groups functionality */
    var $allGroups = $(".allGroups").change(function() {
        var checked = this.checked;
        $(".group").prop("checked", checked);
        $(".c").prop("checked", checked);
    })

    /* Individual Group functionality */
    $(".group").change(function() {
        var checked = this.checked;
        var number = this.value
        var set = '.group-' + number;
        $(set).prop("checked", checked);
        var allchecked = $(".group:checked").length == $(".group").length;
        $allGroups.prop('checked', allchecked);
    });
});

小提琴：

我还对格式做了一些改进。注意事项：

在if语句中，您永远不需要将任何内容与“真”或“假”进行比较。。。结果将永远是你正在比较的东西！（真==真）->（真）
使用
prop
代替
attr

与其在相同且需要布尔值的if/else语句两端重复代码块，只需将bool结果赋给变量并传递
以下是更新后的JavaScript：

$(document).ready(function() {
    /* All groups functionality */
    var $allGroups = $(".allGroups").change(function() {
        var checked = this.checked;
        $(".group").prop("checked", checked);
        $(".c").prop("checked", checked);
    })

    /* Individual Group functionality */
    $(".group").change(function() {
        var checked = this.checked;
        var number = this.value
        var set = '.group-' + number;
        $(set).prop("checked", checked);
        var allchecked = $(".group:checked").length == $(".group").length;
        $allGroups.prop('checked', allchecked);
    });
});

“全选”复选框本身取消选中
当不再检查所有内容时

这是假设我们也考虑了未选中的联系人组复选框

$(":checkbox").change(function() {
    if ($(":checked").length < $(":checkbox").length) {
        $(".allGroups").prop("checked", false);
    }
});

$（“：复选框”）.change（函数（）{
如果（$（“：选中”）.length<$（“：复选框”）.length）{
$（“.allGroups”）.prop（“选中”，false）；
}
});

“全选”复选框本身取消选中
当不再检查所有内容时

这是假设我们也考虑了未选中的联系人组复选框

$(":checkbox").change(function() {
    if ($(":checked").length < $(":checkbox").length) {
        $(".allGroups").prop("checked", false);
    }
});

$（“：复选框”）.change（函数（）{
如果（$（“：选中”）.length<$（“：复选框”）.length）{
$（“.allGroups”）.prop（“选中”，false）；
}
});
在我发完8分钟后，用几乎相同的代码发布，你得到了接受吗？你是怎么做到的？：）我花时间在一个非常有编号的列表中确定了他的格式问题，显著地减少了他的行数，提高了代码的清晰度，有一个没有说“在这里输入链接描述”的链接，并发布了整个代码块。猜猜看。在我发了8分钟后，用几乎相同的代码发了出来，你得到了接受吗？你是怎么做到的？：）我花时间在一个非常有编号的列表中确定了他的格式问题，显著地减少了他的行数，提高了代码的清晰度，有一个没有说“在这里输入链接描述”的链接，并发布了整个代码块。只是猜测而已。