Javascript 选中Gridview中的复选框（在标题模板中）和其他复选框（在项目模板中）也会选中jquery

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

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

---

您只需遍历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>

然后是javascript

<script>
    function toggleSelectionUsingHeaderCheckBox(chkbx) {
        var GridView1 = document.getElementById("<%=GridView1.ClientID %>");
        for (i = 1; i < GridView1.rows.length; i++) {
            GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = chkbx.checked;
        }
    }
</script>

使用HeaderCheckBox（chkbx）进行功能切换选择{
var GridView1=document.getElementById（“”）；
对于（i=1；i

gridview头中的复选框调用执行循环和检查的javascript函数

---

希望这对我有帮助。

这就完成了我的工作

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

var gridview id='#'；
函数checkAll（selectAllCheckbox）{
//获取项目行中的所有复选框，并根据“全选”状态选择/取消选择
//：checkbox是获取所有复选框的jquery选择器
$（'td:checkbox'，gridViewId）.prop（“选中”，selectAllCheckbox.checked）；
}
函数取消选中全部（选中复选框）{
//如果未选中任何项目，请同时取消选中标题复选框
如果（！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');
                }
                });
            });

$（文档）.ready（函数（）{
$（'#'）。单击（函数（）{
var gv=document.getElementById（“”）；
var inputList=gv.getElementsByTagName（“输入”）；
var numChecked=0；
对于（变量i=0；i

然后是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>

查看下面的链接，看看它是否回答了您的问题您不需要ASP代码来解决这个问题；您只需要一个简单的HTML页面。首先让它以这种方式工作，然后使您的解决方案适应ASP。