您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

zTree 點擊文字不勾選 Checkbox/Radio：需自行綁定 onClick 事件呼叫 checkNode

編輯：程式設計綜合問答

原因

zTree 的 Checkbox/Radio 是**模擬渲染的圖片/字體圖示**，非原生 ``，**文字區域 (`` 標籤) 點擊不會自動觸發勾選**，需開發者手動處理。

解決方案：在 `setting.callback.onClick` 中呼叫 `checkNode`

var setting = {
    check: {
        enable: true,
        chkStyle: "checkbox", // 或 "radio"
        radioType: "all"      // radio 時：all=全樹單選, level=同層級單選
    },
    callback: {
        onClick: function(event, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            // 切換勾選狀態：第三參數 false=不觸發 onCheck 回調, true=觸發
            zTree.checkNode(treeNode, !treeNode.checked, true, true); 
            // 參數：node, checked, checkTypeFlag(父子關聯), callbackFlag(觸發onCheck)
        }
    }
};
$.fn.zTree.init($("#treeDemo"), setting, zNodes);

參數詳解 `checkNode(node, checked, checkTypeFlag, callbackFlag)`

`checked`：`true` 勾選，`false` 取消。常用 `!node.checked` 切換。
`checkTypeFlag` (預設 true)：是否根據 `check.chkboxType` (如 `{"Y": "ps", "N": "ps"}`) 聯動父子節點。
`callbackFlag` (預設 true)：是否觸發 `setting.callback.onCheck` 回調。**若在 onClick 中呼叫，建議傳 `true` 保持邏輯一致**。

Radio 單選特殊處理

`chkStyle: "radio"` 時，`checkNode(node, true, ...)` 會自動取消同組 (依 `radioType`) 其他節點選中狀態，無需手動迴圈。

完整範例 (含取得所有勾選節點)

function onCheck(event, treeId, treeNode) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = treeObj.getCheckedNodes(true); // true=只取勾選的
    var ids = nodes.map(n => n.id).join(',');
    $("#hiddenInput").val(ids); // 回填隱藏域提交
}

核心：zTree 文字區域點擊不自動勾選，必須在 onClick 回調中顯式呼叫 checkNode。