Question

我正在使用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以及是否再次选中所有三个复选框{ {1}}也将被选中，如果未选中所有三个，则也会取消选中主复选框chkSelectAll。

请建议!!

Answer 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

Answer 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);            
});

Answer 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);
});

Answer 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'));

使用JQuery在子复选框的基础上选择和取消选中Master Checkbox

4 个答案: