我有一个复选框名称全选
,我想在其上选中/取消选中所有复选框 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
}
最佳答案
在 ASP.NET(Webforms)中,当您使用这样的服务器控件时:
<asp:CheckBox ID="chkAll" runat="server" Text="Parent" />
它在客户端上的渲染如下:
<span id="somprefix_chkAll">
<input type="checkbox" />
</span>
因此,如果您在 JavaScript 中使用 $("#<%= chkAll.ClientID %>") 那么您确实在等待该 span 元素 (id="somprefix_chkAll") 的事件,但该事件永远不会由于 change 事件仅应用于输入元素 ( see jQuery doc. ),因此将被触发。
但是你可以轻松解决你的问题,你可以在asp.net中使用纯html控件,它也可以是服务器控件(通过属性:runat =“server”),这意味着你可以访问到后面代码中的控件。例如,您可以使用这个:
<input type="checkbox" id="chkAll" runat="server" />
在后面的代码中,您可以一如既往地访问:
//assigning:
this.chkAll.Checked = true;
//get:
var isChecked = this.chkAll.Checked;
考虑到上述情况,让我更改您的代码:
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);
}
<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>
请参阅JSFiddle Demo .
关于javascript - 如何在单个复选框事件上选中/取消选中所有 asp.net 复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34215627/