Question

我有一个复选框名称Select All，我想选中/取消选中我所有的复选框div。

由于我的复选框是runat=server的asp.net控件，所以我没有得到如何在客户端处理它。

这是我的代码：

<asp:CheckBox onchange="Checkallcheckbox()" ID="chkAll" runat="server" Text="Parent" /> -- parent of all checkboxes.

---------Section 1 -----------
<div id="section1">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent1" runat="server" Text="Check All" /> --Parent of below 2 checkboxes
    </li>
    <li>
        <asp:CheckBox ID="chkchild1" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild2" runat="server" Text="Child 2" />
    </li>                                
</div>

---------Section 2 -----------
<div id="section2">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent2" runat="server" Text="Check all" /> --Parent of below 2 checkboxes
    </li>
    <li>
        <asp:CheckBox ID="chkchild3" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild4" runat="server" Text="Child 2" />
    </li>                                
</div>

function Checkallcheckbox() {
    // How to check/uncheck all checkbox on this event
}

Answer 1

在ASP.NET（Webforms）中使用这样的服务器控件时：

<asp:CheckBox ID="chkAll" runat="server" Text="Parent" />

它在客户端呈现如下：

＆＃13;

<span id="somprefix_chkAll">
  <input type="checkbox" />
</span>

＆＃13;

因此，如果您在javascript中使用$（＆＃34;＃＆lt;％= chkAll.ClientID％＆gt;＆＃34;），那么您真的在等待该span元素的事件（id = ＆＃34; somprefix_chkAll＆＃34;）但事件永远不会被触发，因为更改事件仅适用于输入元素（see jQuery doc.）。

但是你可以轻松解决你的问题，你可以在asp.net中使用普通的html控件，也可以是服务器控件（通过属性：runat =＆＃34; server＆＃34;），这意味着您可以访问后面代码中的控件。例如，您可以使用：

<input type="checkbox" id="chkAll" runat="server" />

在后面的代码中，您可以一如既往地访问：

//assigning:
this.chkAll.Checked = true;
//get:
var isChecked = this.chkAll.Checked;

考虑到上述情况，让我更改您的代码：

＆＃13;

function Checkallcheckbox(currentClickedCheckbox) {

	var section1Chks= $('#section1').find(':checkbox');
	var section2Chks= $('#section2').find(':checkbox');
	
	if($(currentClickedCheckbox).is(':checked')) {
		section1Chks.prop('checked', true);
		section2Chks.prop('checked', true);
	} else {
		section1Chks.prop('checked', false);
		section2Chks.prop('checked', false);
	}
}

function CheckAllInSection(currentClickedCheckbox) {
	var $currentChk = $(currentClickedCheckbox);
	var sectionChks= $currentChk.closest('div').find(':checkbox');
	var checkAll = $currentChk.is(':checked');
  sectionChks.prop('checked', checkAll);

}

＆＃13;

<input type="checkbox" id="chkAll" onchange="Checkallcheckbox(this)"   runat="server" value="Parent" />
<br />
---------Section 1 -----------
<div id="section1">
    <li class="carousel-border">
	<input type="checkbox" id="chkParent1" runat="server" onchange="CheckAllInSection(this)" value="Check All" />
    </li>
    <li>
        <input type="checkbox" id="chkchild1" runat="server" value="Child 1" />
    </li>
    <li>
        <input type="checkbox" id="chkchild2" runat="server" value="Child 2" />
    </li>                                
</div>

---------Section 2 -----------
<div id="section2">
    <li class="carousel-border">
        <input type="checkbox" id="chkParent2" runat="server" onchange="CheckAllInSection(this)" value="Check All" />
    </li>
    <li>
        <input type="checkbox" id="chkchild3" runat="server" value="Child 3" />
    </li>
    <li>
        <input type="checkbox" id="chkchild4" runat="server" value="Child 4" />
    </li>                                
</div>

＆＃13;

请参阅JSFiddle Demo。

Answer 2

为它们提供相应的类名，以便可以选择它们然后，您将能够使用单个选择器执行此操作：

<asp:CheckBox ID="chkAll" runat="server" Text="Parent" />

<div id="section1" class="section">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent1" Class="chkParent" runat="server" Text="Check All" /> --Parent of below 2 checkboxes
    </li>
    <li>
        <asp:CheckBox ID="chkchild1" Class="chkChild" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild2" Class="chkChild" runat="server" Text="Child 2" />
    </li>                                
</div>

<div id="section2" class="section">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent2" Class="chkParent" runat="server" Text="Check all" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild3" Class="chkChild" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild4" Class="chkChild" runat="server" Text="Child 2" />
    </li>                                
</div>

现在，在您的JS中，您可以附加change个处理程序：

$(document).ready(function() {
    var $chkAll = $("#<%= chkAll.ClientID %>");

    $chkAll.change(function() {
        $(".chkParent, .chkChild").prop('checked', this.checked);
    });

    $(".chkParent").change(function() {
        $(this).closest('.section').find('.chkChild').prop('checked', this.checked);
    });
});

您可能还想添加以下处理程序：

  $(".chkChild, .chkParent").change(function() {
      var allCheckedInGroup =  $(this).closest('.section').find('.chkChild:not(:checked)').length === 0;
      $(this).closest('.section').find('.chkParent').prop('checked', allCheckedInGroup);

      var allChecked = $(".chkParent:not(:checked)").length === 0;
      $chkAll.prop('checked', allChecked);
  });

为了使更改反映到＆＃34;全选＆＃34;复选框。尝试点击某些东西并理解它。

这是工作JSFiddle demo（没有ASP.NET）。

如何在单一复选框事件上选中/取消选中所有asp.net复选框？

2 个答案: