检查所有复选框功能 Asp.net答案

【问题标题】：Check All Checkboxs feature Asp.net检查所有复选框功能 Asp.net
【发布时间】：2013-07-18 13:46:24
【问题描述】：

我基本上想问这个问题（How to implement "select all" check box in HTML?），但从 asp.net 的角度来看。当您使用 asp.net 执行此操作时，似乎有更多的挑战需要克服。 CssClass 属性使用您指定的类生成一个跨度容器，并且它不会放置在输入中。随着母版页和控件的挑战。我正在遍历记录并用复选框显示它们。我希望按类抓取所有复选框以执行所有检查。我认为这是不可能的。有什么建议吗？

标记：

  <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>`

浏览器：

//Check All check box
       <span class="CheckAll"><input id="ctl00_ContentPlaceHolder1_checkAll" type="checkbox" name="ctl00$ContentPlaceHolder1$checkAll" /></span>

//Each checkbox that will be checked looks like this
<span class="chkBox"><input id="ctl00_ContentPlaceHolder1_ctl01" type="checkbox" name="ctl00$ContentPlaceHolder1$ctl01" /></span>

JavaScript

  $('.CheckAll').click(function (event) {
            alert("start");
            if (this.checked) {
                // Iterate each checkbox
                $(':checkbox').each(function () {
                    this.checked = true;
                });
                alert("end");
            }
        });

【问题讨论】：

标记（来自记录）是什么样的？
@DGibbs 更新了问题，谢谢！
你能不把这个选择器$(':checkbox').each(function () {改成$('.chkBox input').each(function () {吗？

标签： c# javascript asp.net webforms

【解决方案1】：

ClientIDMode 复选框控件的属性将允许您更轻松地使用客户端选择器，如下所示：

标记：

<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" ClientIDMode="Static" />

查看Control.ClientIDMode Property MSDN 文档。

注意：ClientIDMode 在 ASP.NET 4.0 及更高版本中可用。

【讨论】：

这有助于定位主 CheckAll 框，但我无法对要执行检查的框进行分组。
<span class="CheckAll" ClientIDMode="Static"><input id="ctl00_ContentPlaceHolder1_checkAll" type="checkbox" name="ctl00$ContentPlaceHolder1$checkAll" /></span> 就是这样的结果。
生成的项目列表在哪里？
我正在更新我没有编写的旧现有代码。检查问题。

【解决方案2】：

由于每个复选框都在一个具有“chkBox”类的范围内，因此请使用单击处理程序上的该选择器定位复选框：

$('.CheckAll').on('click', function (event) {
    var checked = $(this).prop('checked');
    $('.chkBox :checkbox').prop('checked', checked);
});

如果你将所有你想检查的复选框都包装在一个容器 div 中会更精确：

<div id="myCheckboxes">
    // .NET code here
</div>

JS：

$('.CheckAll').on('click', function (event) {
    var checked = $(this).prop('checked');
    $('#myCheckboxes :checkbox').prop('checked', checked);
});

【讨论】：

【解决方案3】：

我相信，卡尔改进了这种方法。但是，如果您想坚持现有的，请将您的 Javascript 修改为以下内容：

$('.CheckAll').find(':checkbox').click(function (event) {
    alert("start");
    if (this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function () {
            this.checked = true;
        });
        alert("end");
    }
});

【讨论】：

【解决方案4】：

下面的代码基本上选中了所有的复选框，并根据CheckAll Checkbox改变了检查状态。

<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" />

单个页面中的多组复选框

如果你在一个页面中有多组复选框，你可以用类来区分它们。

<%@ 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>

【讨论】：

这针对外部跨度标签。如果您查看页面源并查看#<%= CheckAll.ClientID %> 提供的 id，它是父跨度而不是复选框。
我不明白你的评论。就我测试上面的代码而言，它们都可以正常工作。哪一部分不适合你？
我无法启动它。当我查看源代码并看到父标签的 id 时。
这可能与页面中的其他代码有关。我上传了整个代码。所以请创建一个没有母版页的新Web Form 页面，并对其进行调试。另外，想用Chrome浏览器控制台看看是否有脚本错误。
我认为这也与现有代码有关。我刚刚使用了这个function toggle(source) { checkboxes = document.getElementsByTagName('input'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } }

【解决方案5】：

我使用下面的这个脚本让它工作。这并不适用于所有场景，但到目前为止它对我的效果非常好。谢谢！

标记

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

            }

【讨论】：