C# 选中所有复选框功能Asp.net
我基本上想问这个问题（），但从asp.net的角度来看。当您使用asp.net进行此操作时，似乎还有更多的挑战需要克服。CssClass属性使用指定的类生成一个span容器，但它不会放置在输入上。以及母版页和控件的挑战。我正在循环浏览记录，并用复选框显示它们。我希望通过全班抓取所有复选框来执行全选。我认为那是不可能的。有什么建议吗 标记：C# 选中所有复选框功能Asp.net,c#,javascript,asp.net,webforms,C#,Javascript,Asp.net,Webforms,我基本上想问这个问题（），但从asp.net的角度来看。当您使用asp.net进行此操作时，似乎还有更多的挑战需要克服。CssClass属性使用指定的类生成一个span容器，但它不会放置在输入上。以及母版页和控件的挑战。我正在循环浏览记录，并用复选框显示它们。我希望通过全班抓取所有复选框来执行全选。我认为那是不可能的。有什么建议吗 标记： <asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" /> <
<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" />
<asp:Table ID="tblitems" Visible="false" Width="80%" HorizontalAlign="Center" runat="server">
<asp:TableRow>
//The data gets added as a table row.
</asp:TableRow>
</asp:Table>`
<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" ClientIDMode="Static" />
复选框控件的
ClientIDMode <asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" />
<asp:Table ID="tblitems" Visible="false" Width="80%" HorizontalAlign="Center" runat="server">
<asp:TableRow>
//The data gets added as a table row.
</asp:TableRow>
</asp:Table>`
<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" ClientIDMode="Static" />
MSDN文档
注意：clientdmode
在ASP.NET 4.0及更高版本中可用。由于每个复选框都位于一个带有类“chkBox”的范围内，请使用单击处理程序上的该选择器定位复选框：
$('.CheckAll').on('click', function (event) {
var checked = $(this).prop('checked');
$('.chkBox :checkbox').prop('checked', checked);
});
如果将所有要在容器div中选中的复选框包装起来，则会更精确：
<div id="myCheckboxes">
// .NET code here
</div>
我相信卡尔已经改进了这种方法。但是，如果您想坚持现有的内容，请将Javascript修改为以下内容：
$('.CheckAll').find(':checkbox').click(function (event) {
alert("start");
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
alert("end");
}
});
下面的代码基本上选择了所有复选框，并根据CheckAll复选框更改复选状态
<script type="text/javascript">
$(document).ready(function () {
$('#<%= CheckAll.ClientID %>').click(function() {
var checkedStatus = this.checked;
$("input[type='checkbox']").attr('checked', checkedStatus);
});
});
</script>
<asp:CheckBox runat="server" ID="CheckAll" />
<asp:CheckBox runat="server" ID="Check1" />
<asp:CheckBox runat="server" ID="Check2" />
<asp:CheckBox runat="server" ID="Check3" />
<asp:CheckBox runat="server" ID="Check4" />
$（文档）.ready（函数（）{
$（'#'）。单击（函数（）{
var checkedStatus=this.checked；
$（“输入[type='checkbox']”）。attr（'checked'，checkedStatus）；
});
});
单个页面中有多组复选框
如果在一个页面中有多组复选框，则可以使用类来区分它们
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="WebApplication2012.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Selects all enabled checkboxes
$("#<%= CheckAll.ClientID %>").click(function () {
var checkedStatus = this.checked;
$(".myCheckBox input[type='checkbox']").attr('checked', checkedStatus);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBox runat="server" ID="CheckAll" Text="Check All" CssClass="myCheckAll" /><br />
<asp:CheckBox runat="server" ID="Check1" Text="Check1" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check2" Text="Check2" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check3" Text="Check3" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check4" Text="Check4" CssClass="myCheckBox" />
</form>
</body>
</html>
$（文档）.ready（函数（）{
//选中所有启用的复选框
$（“#”）单击（函数（）{
var checkedStatus=this.checked；
$（“.myCheckBox输入[type='checkbox']”）.attr（'checked'，checkedStatus）；
});
});
我使用下面的脚本实现了它。这并不适用于所有场景，但到目前为止，它对我的场景非常有效。谢谢
加价
<asp:CheckBox runat="server" ID="CheckAll" OnClick="toggle(this)" />
Javascript
function toggle(source) {
checkboxes = document.getElementsByTagName('input');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
功能切换（源代码）{
复选框=document.getElementsByTagName（'input'）；
对于（变量i=0，n=checkbox.length；i
标记（来自记录）是什么样子？@DGibbs更新了问题谢谢！您是否可以将此选择器$（':checkbox'）。每个（函数（）{
更改为$（'.chkBox input'）。每个（函数（）{
？这有助于确定主复选框的目标，但我无法对要执行选中操作的框进行分组。
就是这样的结果。生成的项目列表在哪里？我正在更新我没有编写的旧现有代码。选中问题。这是针对outter span标记。如果查看页面源代码并查看t#
提供的id是为父项span而不是复选框提供的。我不理解您的评论。就我测试上述代码而言，它们都工作正常。哪个部分对您不起作用？我无法启动它。当我查看源代码并看到父项标记的id时。这可能与页面中的其他代码有关。我上载了整个代码。因此，请创建一个没有母版页的新Web表单
页面，并对其进行调试。此外，您希望使用Chrome浏览器控制台查看是否存在脚本错误。我认为这也与现有代码有关。我刚刚通过使用功能切换（源代码）使其正常工作{checkbox=document.getElementsByTagName（'input'）；for（var i=0，n=checkbox.length；i
function toggle(source) {
checkboxes = document.getElementsByTagName('input');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}