【问题标题】:When I click on a check box in header all the below checkbox should be checked当我单击标题中的复选框时,应选中以下所有复选框
【发布时间】:2017-09-08 05:47:12
【问题描述】:

我的代码是

function CheckAll(oCheckbox)
 {
 var GridView2 = document.getElementById("<%=dgShiftOverrideData.ClientID %>");
         for (i = 1; i < ctl00_ContentPlaceHolder1_dgShiftOverrideData.rows.length; i++)
 {
             ctl00_ContentPlaceHolder1_dgShiftOverrideData.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = oCheckbox.checked;
  }
}

<asp:TemplateColumn HeaderText="Delete" HeaderStyle-ForeColor="White">
                                                       <HeaderTemplate>
                                                           <asp:CheckBox ID="CheckBox3"  Checked="false" onclick="CheckAll(this)" AutoPostBack="true" runat="server" />
                                                       </HeaderTemplate>
                                                        <ItemTemplate>
                                                            <asp:CheckBox ID="chkDelete_SO" runat="server"  />
                                                        </ItemTemplate>
                                                        <HeaderStyle CssClass="SentinelGridHeader" />
                                                    </asp:TemplateColumn>

【问题讨论】:

  • 问“请帮助我”的问题往往是寻求高度本地化的指导,或者在某些情况下,是不适合我们的问答形式的持续或私人帮助。它也相当模糊,最好用更具体的问题代替。请阅读Why is “Can someone help me?” not an actual question?

标签: javascript asp.net


【解决方案1】:

只检查子复选框使用这个

function CheckAll(oCheckbox)
{
("<%=dgShiftOverrideData.ClientID %>").find("input:checkbox").each(function () {
if (this != oCheckbox) {this.checked = oCheckbox.checked;}
});
}

请参考此链接 https://www.aspsnippets.com/Articles/Check-Uncheck-all-CheckBoxes-in-ASPNet-GridView-using-jQuery.aspx

我在下面创建了工作 aspx 页面,您可以对此有所了解

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <script>

                function CheckAll(oCheckbox) {
                    $("#<%= dgShiftOverrideData.ClientID%>").find("input:checkbox").each(function () {
                        if (this != oCheckbox) { this.checked = oCheckbox.checked; }
                    });
                }

            </script>

            <asp:DataGrid ID="dgShiftOverrideData" runat="server" AllowPaging="True" AllowSorting="True" Width="100%" >
                <Columns>
                    <asp:TemplateColumn HeaderText="Delete" HeaderStyle-ForeColor="White">
                        <HeaderTemplate>
                            <asp:CheckBox ID="CheckBox3" Checked="false" onclick="CheckAll(this)" runat="server" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="chkDelete_SO" runat="server" />
                        </ItemTemplate>
                        <HeaderStyle CssClass="SentinelGridHeader" />
                    </asp:TemplateColumn>
                </Columns>
            </asp:DataGrid>
        </div>
    </form>
</body>
</html>

对代码所做的更改:

  • 从复选框中删除了 Autopostback = true
  • 添加了 Jquery

【讨论】:

  • 您好,我收到此错误 0x800a01b6 - JavaScript 运行时错误:对象不支持此属性或方法
  • 我已经用完整的 aspx 工作代码编辑了答案,如果还有任何问题请告诉我
【解决方案2】:

这个 sn-p 就是你所需要的。它向标题复选框添加了一个侦听器,并在更改时更改所有其他侦听器。

<script type="text/javascript">
    $("#<%= GridView1.ClientID %> th input:checkbox").change(function () {
        var is_checked = this.checked;
        $("#<%= GridView1.ClientID %> tr").each(function () {
            $(this).find("td input:checkbox").each(function (index, element) {
                this.checked = is_checked;
            });
        });
    });
</script>

【讨论】:

    猜你喜欢
    • 2014-06-20
    • 2013-04-26
    • 2018-01-10
    • 1970-01-01
    • 1970-01-01
    • 2012-04-04
    • 1970-01-01
    • 2015-05-12
    • 1970-01-01
    相关资源
    最近更新 更多