0

我基本上想问这个问题（如何在 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");
            }
        });
4

5 回答 5

0

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

$('.CheckAll').find(':checkbox').click(function (event) {
    alert("start");
    if (this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function () {
            this.checked = true;
        });
        alert("end");
    }
});
于 2013-07-18T13:58:30.973 回答
0

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

标记：

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

查看Control.ClientIDMode 属性MSDN 文档。

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

于 2013-07-18T13:52:39.623 回答
0

以下代码基本上选择了所有复选框，并根据 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>
于 2013-07-18T14:05:51.177 回答
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>

JS：

$('.CheckAll').on('click', function (event) {
    var checked = $(this).prop('checked');
    $('#myCheckboxes :checkbox').prop('checked', checked);
});
于 2013-07-18T13:56:00.060 回答
-1

我使用下面的这个脚本让它工作。这不适用于每种情况，但到目前为止它对我的情况非常有效。谢谢！

标记

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

            }
于 2013-07-18T15:30:23.090 回答