Question

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

$(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。全选复选框获取.allGroups

现在，当不再检查所有内容时，我如何实现“全选”复选框取消选中？

这里有一个jsFiddle：http://jsfiddle.net/nqHtu/1/

Answer 1

在这里：http://jsfiddle.net/AlienWebguy/nqHtu/2/

只需将此添加到.group更改事件：

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

此外，只是抬头，“选中”现在是属性，而不是属性，因此您需要使用prop()而不是attr()来操纵它

Answer 2

$(".c").change(function() {
    if(! this.checked) {
        $(".allGroups").attr("checked", false);
    }
});

Answer 3

小提琴：http://jsfiddle.net/nqHtu/4/

我还进行了几次格式化改进。注意事项：

您永远不需要在if语句中将任何内容与“true”或“false”进行比较......结果将始终是您要比较的内容！（true == true） - ＆gt; （真）。
使用attr而不是prop。 http://api.jquery.com/prop/
不要在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);
    });
});

Answer 4

'全选'复选框取消选中自己什么时候不再检查所有东西

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

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

jQuery复选框多选

4 个答案: