ASP.NET 2.0 TreeView CheckBox 全選/取消全選 JavaScript 實作

利用 TreeView 的 onclick 事件，配合 JavaScript 實現父節點勾選時自動勾選所有子節點，子節點全部取消時父節點自動取消。

核心 JavaScript 邏輯

<script type="text/javascript">
function OnTreeNodeChecked() {
    var ele = event.srcElement;
    if (ele.type != 'checkbox') return;

    // 1. 父節點被勾選 -> 勾選所有子節點
    var childrenDivId = ele.id.replace('CheckBox', 'Nodes');
    var div = document.getElementById(childrenDivId);
    if (div != null) {
        var checkboxes = div.getElementsByTagName('INPUT');
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox')
                checkboxes[i].checked = ele.checked;
        }
    }
    // 2. 子節點變更 -> 更新父節點狀態
    else {
        var parentDiv = GetParentByTagName(ele, 'DIV');
        var checkboxes = parentDiv.getElementsByTagName('INPUT');
        var parentCheckboxId = parentDiv.id.replace('Nodes', 'CheckBox');
        var parentCheckbox = document.getElementById(parentCheckboxId);

        var allChecked = true;
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox' && !checkboxes[i].checked) {
                allChecked = false; break;
            }
        }
        parentCheckbox.checked = allChecked;
    }
}

function GetParentByTagName(element, tagName) {
    var parent = element.parentNode;
    var upper = tagName.toUpperCase();
    while (parent && parent.tagName.toUpperCase() != upper) {
        parent = parent.parentNode || parent.parentElement;
    }
    return parent;
}
</script>

TreeView 宣告

<asp:TreeView ID="TreeView1" runat="server"
    onclick="OnTreeNodeChecked()"
    ShowCheckBoxes="All"
    ExpandDepth="2" />

運作原理

• TreeView 渲染時，每個節點的 CheckBox ID 為 TreeView1n0CheckBox，其子節點容器 ID 為 TreeView1n0Nodes。
• 透過 ID 字串替換快速定位父子關係容器。
• 遞迴向上尋找父 DIV 以處理子節點變更時的父節點狀態同步。