ASP.NET GridView复选框全选优化：仅选中指定ID复选框

当前ASP.NET GridView的表头全选复选框会选中页面所有复选框，需修改GridSelectAllColumn函数，使其仅选中GridView内ID为chkSelect的复选框，同时保留行变色、显示/隐藏删除按钮等原有功能。

修改后的完整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 theBox = (spanChk.type === "checkbox") ? spanChk : spanChk.children[0];
    var xState = theBox.checked;
    
    // 定位当前GridView对应的table元素
    var gridTable = spanChk;
    while (gridTable.tagName !== "TABLE" || !gridTable.id.includes("grdUtenti")) {
        gridTable = gridTable.parentNode;
        if (!gridTable) break;
    }
    if (!gridTable) return;

    // 筛选GridView内ID包含chkSelect的复选框（适配ASP.NET生成的带前缀ID）
    var gridCheckboxes = gridTable.querySelectorAll('input[type="checkbox"][id*="chkSelect"]');
    
    // 触发复选框click事件，保留行变色等原有逻辑
    gridCheckboxes.forEach(function(checkbox) {
        if (checkbox.checked !== xState) {
            checkbox.click();
        }
    });

    // 更新删除按钮的显示状态
    var allCheckboxes = gridTable.querySelectorAll('input[type="checkbox"]');
    var numChecked = 0;
    allCheckboxes.forEach(function(cb) {
        if (cb.checked) numChecked++;
    });
    x.style.display = numChecked > 0 ? "block" : "none";
}

关键修改说明 #

1. 限定操作范围：通过表头复选框向上遍历DOM，精准定位到当前GridView对应的表格元素，避免影响页面其他复选框。
2. 精准筛选目标控件：使用querySelectorAll匹配ID包含chkSelect的复选框，适配ASP.NET为服务器控件生成的带前缀ID（如grdUtenti_chkSelect_0）。
3. 保留原有功能链：通过触发复选框的click事件，自动调用Check_Click函数，确保行变色、表头复选框状态同步等逻辑正常执行。
4. 同步删除按钮状态：重新统计GridView内选中的复选框数量，保持删除按钮显示/隐藏逻辑一致。

内容的提问来源于stack exchange，提问作者Gabriele Cozzolino