javascript - 使用复选框内的值添加全选和取消全选选项

Question

我正在尝试创建全选、取消全选选项，就像我们在电子邮件收件箱中看到的一组复选框一样。我为此添加了一个示例。我试图获得的工作模型是当我单击复选框时，它应该选择和取消选择具有特定值的组。此外，即使我们取消选中列表中的任何单个名称，它也应该取消选中主要的“全选”复选框。我添加了一个jsfiddle，但它无法正常工作。

$(document).ready(function(){
    $("#selectAll").live("click",function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        var clickedValue=$(this).attr('class');
        clickedValue=clickedValue.replace("select", "");
        $("#modalEntity").attr("value", "group"+ clickedValue).attr("checked", true);      
    });
});

http://jsfiddle.net/EBxSu/

Answer 1

更新(将实时更改为开启并进行一些重命名)

首先，您永远不应该拥有具有相同 ID 的元素，如下所示:

<input id="modalEntity" class="entity1" type="checkbox" value="group1" name="India">India
<input id="modalEntity" class="entity2" type="checkbox" value="group1" name="UAE">UAE

我将 jQuery 代码重写为:

    $(document).ready(function() {
    "use strict";
    $("input.select").on("click", function() {
        $(this).siblings().find("input.entity").prop("checked", $(this).is(":checked"));
    });

    $("input.entity").on("click", function() {
        var $entityGroup = $(this).siblings().andSelf();
        $(this).parent().siblings("input.select").prop("checked", $entityGroup.length === $entityGroup.filter(":checked").length);
    });
});

.prop()只能在 jQuery 1.6 及更高版本上使用。

我还稍微重写了 HTML，请查看更新后的 jsFiddle:http://jsfiddle.net/sQVe/EBxSu/8/

如果我错过了什么，请发表评论，但我认为这就是您想要的。