javascript - 在 Gridview 中检查复选框(在 header 模板中)，并检查其他复选框(在项目模板中)以及 jquery

Question

我希望当我选中标题模板中的复选框时，项目模板中的其他复选框也应该被选中，不幸的是，这没有按预期工作。我在 HTML 的 head 标签中添加了引用 jquery 版本 1.6.2 的脚本，然后添加了一个在单击复选框后将触发的函数。另外，在 header 模板中的复选框上，onclick 函数具有我在 head 标记中编写的 jquery 函数。警报工作正常。我这样做是为了帮助我测试 Jquery 是否正常工作。注意没有 AutoPostBack 属性，但切换不起作用。

//this script is in the head tag
function toggleSelectionUsingHeaderCheckBox(source) {
    $("#GridView1 input[name$='cbDelete']").each(function () {
        $(this).attr('checked', source.checked);
    });
    //alert('checked');
    //the alert above is working fine
}

列中的 Gridview 代码

<Columns>
    <asp:TemplateField>
        <HeaderTemplate>
            <asp:CheckBox ID="cbDeleteHeader" runat="server" onclick="toggleSelectionUsingHeaderCheckBox(this);" />
        </HeaderTemplate>
        <ItemTemplate>
            <asp:CheckBox ID="cbDelete" runat="server" />
        </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Id">
        <ItemTemplate>
            <asp:Label ID="lblEmployeeId" runat="server"
        Text='<%# Bind("EmployeeId") %>'></asp:Label>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="StaffName" HeaderText="Name" />
    <asp:BoundField DataField="AccessRole" HeaderText="Access Role" />
    <asp:BoundField DataField="LockStatus" HeaderText="Status" />
</Columns>

Answer 1

这完成了我的工作

var gridViewId = '#<%= GridView1.ClientID %>';
        function checkAll(selectAllCheckbox) {
            //get all checkboxes within item rows and select/deselect based on select all checked status
            //:checkbox is jquery selector to get all checkboxes
            $('td :checkbox', gridViewId).prop("checked", selectAllCheckbox.checked);
        }
        function unCheckSelectAll(selectCheckbox) {
            //if any item is unchecked, uncheck header checkbox as well
            if (!selectCheckbox.checked)
                $('th :checkbox', gridViewId).prop("checked", false);
        }

要计算已检查项目的数量，请在对按钮执行操作之前使用此功能

$(document).ready(function () {
            $('#<%=btnDelete.ClientID%>').click(function () {

                var gv = document.getElementById("<%= GridView1.ClientID %>");
                var inputList = gv.getElementsByTagName("input");
                var numChecked = 0;

                for (var i = 0; i < inputList.length; i++) {
                    if (inputList[i].type == "checkbox" && inputList[i].checked) {
                        numChecked = numChecked + 1;
                    }
                }
                if (numChecked == 0) {
                    alert('No rows selected');
                    return false;
                }
                else {
                    return confirm(numChecked + ' row(s) will be locked or deleted');
                }
                });
            });

然后是 html 标记

<Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="cbDeleteHeader" runat="server" onclick="checkAll(this);" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="cbDelete" onclick="unCheckSelectAll(this);" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Id">
            <ItemTemplate>
                <asp:Label ID="lblEmployeeId" runat="server"
                    Text='<%# Bind("EmployeeId") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="StaffName" HeaderText="Name" />
        <asp:BoundField DataField="AccessRole" HeaderText="Access Role" />
        <asp:BoundField DataField="LockStatus" HeaderText="Status" />
    </Columns>