使用JQuery根据子复选框选择和取消选择主复选框答案

【问题标题】：Selecting and Deselecting Master Checkbox on the basis of child checkboxes using JQuery使用JQuery根据子复选框选择和取消选择主复选框
【发布时间】：2011-05-16 07:13:06
【问题描述】：

我正在使用 JQuery，并且我在下面的 HTML 中带有复选框。我有一个名为 chkSelectAll 的主复选框和 DIV 内的子复选框。

 <div class="selectallitems">
                    <div class="selectall">
                        <asp:CheckBox ID="chkSelectAll" CssClass="selectall-txt" runat="server" />
                    </div>
                    <div id="divCheckAll">
                        <div class="selectall">
                            <asp:CheckBox ID="chkItemLists" CssClass="selectall-txt-1" runat="server" />
                            <div class="clear">
                            </div>
                        </div>
                        <br />
                        <div class="selectall">
                            <asp:CheckBox ID="chkComponentLinks" CssClass="selectall-txt-1" runat="server" />
                            <div class="clear">
                            </div>
                        </div>
                        <br />
                        <div class="selectall">
                            <asp:CheckBox ID="chkResourceKeyData" CssClass="selectall-txt-1" runat="server" /></div>
                        <br />
                    </div>
                </div>

现在我希望每当用户选择 chkSelectAll 时，它应该选择所有其他复选框，并且每当用户取消选择其中任何一个时，它应该取消选择 chkSelectAll 以及如果再次选中所有三个复选框，那么 chkSelectAll 将是也被选中，如果三个都没有被选中，那么主复选框 chkSelectAll 也将被取消选中。

请推荐！！

【问题讨论】：

标签： jquery forms checkbox

【解决方案1】：

这是一个优化且更紧凑的版本。其他人应该可以正常工作，但他们一直在不必要地运行选择器。这里所有的选择器都保存在开头。

var $selectAll=$('#chkSelectAll'),
    $checks=$('#divCheckAll :checkbox');

$selectAll.change(function () {
    $checks.attr('checked', this.checked);
});

$checks.change(function () {
    $selectAll.attr('checked', $checks.not(':checked').length==0);
});

jsFiddle Demo

【讨论】：

【解决方案2】：

对于我的应用，我使用了这样的东西：

// This would select / deselect all.
$('#chkSelectAll').change(function() {
    $('.selectall-txt-1').attr('checked', this.checked);
});

对于主选择复选框，您可以使用如下内容：

$('.selectall-txt-1').change(function() {        
    var checkedAll = $('.selectall-txt-1 :checked').length == $('.selectall-txt-1').length;
    $('#chkSelectAll').attr('checked', checkedAll);            
});

【讨论】：

感谢@enoyhsm，但这只会根据主复选框选择和取消选择，但是我希望如果用户取消选择任何子复选框，那么主复选框也应该被取消选择，如果用户也一样再次选中所有三个复选框，然后主复选框将自动再次被选中。
更新了答案。必须重新检查所有语法是否正常。但这个想法是正确的。

【解决方案3】：

我想出了这个：

// Master checkbox
$(".selectall input[type=checkbox]").change(function() {
    $("#divCheckAll input[type=checkbox]").attr("checked", this.checked);
});

// Child checkboxes
$("#divCheckAll input[type=checkbox]").change(function() {
    var isAllChecked = $(".selectall input[type=checkbox]:checked").length == 3;
    $(".selectall input[type=checkbox]").attr("checked", isAllChecked);
});

【讨论】：

你在这里尝试做什么，因为这段代码对我不起作用。主复选框代码可以，子复选框呢
我检查我们是否有 3 个选中的子复选框。如果为真，我们检查 masetr chcekbox，如果为假，我们取消选中主复选框。

【解决方案4】：

这很像 Oleg G. 的答案，除了长度不是硬编码的，我使用 removeAttr 取消选中，我使用 jQuery 的漂亮 :checkbox 选择器：

$.masterCheck = function(master, boxes) {
  master.change(function() {
    if (master.is(':checked'))
      boxes.attr('checked', 'checked')
    else
      boxes.removeAttr('checked')
  });

  boxes.change(function() {
    if (boxes.is(':not(:checked)'))
      master.removeAttr('checked')
    else
      master.attr('checked', 'checked')
  });
};

$.masterCheck($('.selectall:checkbox'), $('#divCheckAll:checkbox'));

【讨论】：