Question

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

标记：

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

Answer 1

复选框控件的

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

标记：

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

查看Control.ClientIDMode Property MSDN文档。

注意：ASP.NET 4.0及更高版本中提供了ClientIDMode。

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

Answer 3

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

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

Answer 4

以下代码基本上会选中所有复选框，并根据CheckAll复选框更改检查状态。

enter image description here

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

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

            }

选中所有复选框功能Asp.net

5 个答案:

单页中的多组复选框