ASP.NET 2.0 TreeView CheckBox 全選聯動實作：JavaScript 遞迴處理父子節點

ASP.NET 2.0 TreeView 設定 ShowCheckBoxes="All" 後，預設不提供父子節點勾選聯動邏輯。本文提供完整 JavaScript 解決方案，實現：父節點勾選 → 所有子節點勾選；子節點全取消 → 父節點取消；部分子節點勾選 → 父節點半選/勾選。

完整 JavaScript 實作

<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="XmlDataSource1" 
    onclick="client_OnTreeNodeChecked();" ShowCheckBoxes="All">
    <DataBindings>...</DataBindings>
</asp:TreeView>

<script language="javascript" type="text/javascript">
function client_OnTreeNodeChecked() {
    var obj = window.event.srcElement;
    var treeNodeFound = false;
    var checkedState;
    
    if (obj.tagName == "INPUT" && obj.type == "checkbox") {
        var treeNode = obj;
        checkedState = treeNode.checked;
        
        // 向上尋找包含的 TABLE 元素（TreeView 節點容器）
        do { obj = obj.parentElement; } while (obj.tagName != "TABLE");
        
        var parentTreeLevel = obj.rows[0].cells.length;
        var parentTreeNode = obj.rows[0].cells[0];
        var tables = obj.parentElement.getElementsByTagName("TABLE");
        var numTables = tables.length;
        
        if (numTables >= 1) {
            for (i = 0; i < numTables; i++) {
                if (tables[i] == obj) {
                    treeNodeFound = true;
                    i++;
                    if (i == numTables) return;
                }
                if (treeNodeFound == true) {
                    var childTreeLevel = tables[i].rows[0].cells.length;
                    if (childTreeLevel > parentTreeLevel) {
                        // 子節點層級較深 → 設定勾選狀態
                        var cell = tables[i].rows[0].cells[childTreeLevel - 1];
                        var inputs = cell.getElementsByTagName("INPUT");
                        inputs[0].checked = checkedState;
                    } else {
                        return; // 同層或父層停止
                    }
                }
            }
        }
    }
}
</script>

核心邏輯解析

1. 事件來源識別：window.event.srcElement 取得觸發元素
2. 節點層級判斷：TreeView 渲染為巢狀 TABLE 結構，cells.length 代表節點深度
3. 向下遞迴處理：找到父節點 TABLE 後，遍歷後續 TABLE，層級較深者為子節點
4. 勾選狀態同步：將父節點 checked 狀態套用至所有子節點 CheckBox

現代化替代方案

若專案允許使用 jQuery，可大幅簡化程式碼：

$('#TreeView1 input[type=checkbox]').click(function() {
    var $this = $(this);
    var checked = $this.prop('checked');
    // 子節點：同一層級後續的巢狀 table
    $this.closest('table').nextAll('table').find('input[type=checkbox]').prop('checked', checked);
    // 父節點邏輯需額外判斷所有同層兄弟是否全勾選
});

注意事項

• 原生 JS 方案相容性最強，無外部依賴
• TreeView 渲染 HTML 結構可能隨 .NET 版本/瀏覽器模式微調，建議實測驗證
• 大量節點時效能考量：考慮虛擬化或分頁載入

此實作解決了 TreeView 最常見的互動缺口，適用於權限樹、分類選單、組織架構等多層級勾選場景。