GridView CheckBox 全選/取消：跨瀏覽器相容寫法（IE / Firefox / Chrome）

問題背景

ASP.NET GridView 渲染出的 HTML `

` 結構在不同瀏覽器的 DOM 走訪方式略有差異。早期常見的 firstChild 寫法在 Firefox 下會抓到換行文字節點而失效。本文提供一個純 JavaScript、無相依套件的穩健解法。

核心 JavaScript 函式

function selectAll(headerCheckbox) {
    // 1. 從 header checkbox 向上找到 <table>
    var table = headerCheckbox.parentNode.parentNode.parentNode.parentNode;
    var colIndex = headerCheckbox.parentNode.cellIndex; // 取得所在欄位索引

    // 2. 略過 header row (i=1 開始)
    for (var i = 1; i < table.rows.length; i++) {
        var row = table.rows[i];
        if (row.cells.length <= colIndex) continue; // 防呆：欄位不足

        // 3. 關鍵：用 getElementsByTagName 精準抓取 checkbox
        var chk = row.cells[colIndex].getElementsByTagName('input')[0];
        if (chk && chk.type === 'checkbox') {
            chk.checked = headerCheckbox.checked;
        }
    }
}

GridView 模板欄位設定

<asp:TemplateField HeaderText="<input type='checkbox' onclick='selectAll(this)' /> 序號">
    <ItemTemplate>
        <input type="checkbox" 
               onclick="Get_jdzh(this);" 
               title='<%# Eval("cpdm").ToString().Trim() %>' />
    </ItemTemplate>
</asp:TemplateField>

為什麼不能用 firstChild？

瀏覽器	cell.firstChild 回傳	結果
IE	直接回傳 `` 元素	正常
Firefox / Chrome	回傳換行/空白的 TextNode	找不到 checkbox → 錯誤

getElementsByTagName('input')[0] 會忽略文字節點，直接定位到第一個 `` 元素，完美跨瀏覽器。

進階：支援多組 CheckBox

若同一 GridView 有多欄 CheckBox（如「全選刪除」、「全選匯出」），只需在各自 Header 的 `` 傳入自身參考，函式會自動根據 cellIndex 判斷欄位，互不干擾。

小結

採用「向上找 table → 取 cellIndex → getElementsByTagName」模式，零相依、不需 jQuery、相容所有主流瀏覽器，是 GridView CheckBox 全選功能的標準寫法。