asp.net 选中/取消选中 gridview 中的所有复选框

Question

我有这个网格视图：

<asp:GridView DataKeyNames="IdUtente" runat="server" ID="grdUtenti" AllowPaging="True" CssClass="tablestyle" AutoGenerateColumns="false" OnPageIndexChanging="grdUtenti_PageIndexChanging" EnableViewState="false" ViewStateMode="Enabled">

最后一列在标题和每一行中包含一个复选框：

<asp:TemplateField>
 <HeaderTemplate>
  <asp:CheckBox runat="server" ID="checkAll" onclick="javascript:GridSelectAllColumn(this, 'chk');" />
 </HeaderTemplate>
 <ItemTemplate>
  <asp:CheckBox ID="chkSelect" runat="server" onclick="Check_Click(this)" />
 </ItemTemplate>
 <ItemStyle Width="3%" />
 <EditItemTemplate>
 </EditItemTemplate>
</asp:TemplateField>

我终于有了这个javascript函数：

<script type="text/javascript">
    function Check_Click(objRef) {
        //Get the Row based on checkbox

        var row = objRef.parentNode.parentNode;
        var x = document.getElementById("divEliminaTutto")
        if (objRef.checked) {
            //If checked change color to Aqua
            row.style.backgroundColor = "#f3ef98";
        }
        else {
            //If not checked change back to original color
            if (row.rowIndex % 2 == 0) {
                //Alternating Row Color
                row.style.backgroundColor = "WhiteSmoke";
            }
            else {
                row.style.backgroundColor = "white";
            }
        }

        //Get the reference of GridView
        var GridView = row.parentNode;

        //Get all input elements in Gridview
        var inputList = GridView.getElementsByTagName("input"); //checkAll

        for (var i = 0; i < inputList.length; i++) {
            //The First element is the Header Checkbox
            var headerCheckBox = document.getElementById("grdUtenti_checkAll"); //inputList[0];

            //Based on all or none checkboxes
            //are checked check/uncheck Header Checkbox
            var checked = true;
            if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
                if (!inputList[i].checked) {
                    checked = false;
                    break;
                }
            }
        }
        headerCheckBox.checked = checked;

        //INIZIO CONTEGGIO CHECKBOX SELEZIONATI PER MOSTRARE\NASCONDERE IL PULSANTE ELIMINA
        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) {
            x.style.display = "block";
        }
        else {
            x.style.display = "none";
        }
        //FINE
    }

    function GridSelectAllColumn(spanChk) {
        var x = document.getElementById("divEliminaTutto")
        var oItem = spanChk.children;
        var theBox = (spanChk.type == "checkbox") ? spanChk : spanChk.children.item[0]; xState = theBox.checked;
        elm = theBox.form.elements;



        for (i = 0; i < elm.length; i++) {
            if (elm[i].type === 'checkbox' && elm[i].checked != xState)
                elm[i].click();
        }

    }
</script>

它做了它应该做的事情，并且超出了它的范围，这意味着当我单击“CheckAll”复选框时，它会选择页面中的所有复选框，即使它们位于网格视图之外。我怎样才能只选择gridview内的复选框（更好的是，只有那些具有“chkSelect”ID的复选框？） 谢谢

编辑： 我包含了所有 javascript 函数来提供代码的完整视图，但我需要的重点是 GridSelectAllColumn 函数。

Answer 1

我是这样解决的：

var headerCheckBox = document.getElementById("grdUtenti_checkAll");
$('[id*=chkSelect]').prop("checked", headerCheckBox.checked);
var x = document.getElementById("divEliminaTutto")
        if (headerCheckBox.checked) {
            x.style.display = "block";
        }
        else {
            x.style.display = "none";
        }
    }