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

问题描述：

我正在使用JQuery，并且在其中有复选框下方的HTML。我有一个名为chkSelectAll的主复选框和DIV中的子复选框。使用JQuery在子复选框的基础上选择和取消选择主复选框

<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也将被取消选中。

请建议!!

答

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

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

谢谢@bazmegakapa！ – 2011-05-16 07:44:45

答

对于我的软件，我用这样的：

对于主选择复选框，你可以使用这样的事情：

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

感谢@enoyhsm，但这只会根据主复选框选择和取消，但是我想，如果用户取消任何孩子复选框，则主复选框也应该被取消，并如果用户再次选择所有三个复选框，则主复选框将自动再次被选中。 – 2011-05-16 07:23:33

更新了答案。必须重新检查，如果所有语法都OK。但这个想法是正确的。 – enoyhs 2011-05-16 07:27:17

答

我想出了这一点：

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

你在这里试图做什么，因为这段代码不适合我。大师复选框代码是好的儿童复选框什么 – 2011-05-16 07:36:22

我检查，如果我们得到3检查儿童checckboxes。如果为true，我们检查masetr chcekbox，如果为false，我们取消选中主复选框。 – 2011-05-16 07:39:31

@Manu发现错误，现在就试试。 – 2011-05-16 07:41:00

答

这是很像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在子复选框的基础上选择和取消选择主复选框

相关推荐