jQuery checkboxtree是一個非常方便的jQuery插件，可以幫助我們快速創建多級復選框樹。無需任何額外的CSS樣式，可以使用默認的樣式，也可以修改樣式以適應您的需求。

使用jQuery checkboxtree非常簡單。首先，在您的網頁中引入jQuery庫和jQuery checkboxtree插件。接下來，在您的HTML代碼中，您可以使用無序列表來創建樹結構。每個列表項必須包含一個input元素和一個label元素。input元素的type屬性必須設置為"checkbox"。label元素的for屬性必須與input元素的id屬性一致。

<ul id="tree">
<li>
<input type="checkbox" id="node1" />
<label for="node1">節點1</label>
<ul>
<li>
<input type="checkbox" id="node1-1" />
<label for="node1-1">節點1-1</label>
</li>
<li>
<input type="checkbox" id="node1-2" />
<label for="node1-2">節點1-2</label>
<ul>
<li>
<input type="checkbox" id="node1-2-1" />
<label for="node1-2-1">節點1-2-1</label>
</li>
<li>
<input type="checkbox" id="node1-2-2" />
<label for="node1-2-2">節點1-2-2</label>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node2" />
<label for="node2">節點2</label>
</li>
</ul>

接下來，只需調用jQuery checkboxtree插件即可將無序列表轉換為復選框樹：

$(function() {
$('#tree').checkboxTree();
});

如果您需要自定義樣式或選項，可以在checkboxTree()方法中傳遞參數。以下是所有可用選項的列表：

$(function() {
$('#tree').checkboxTree({
// 可以使用自定義CSS樣式表
cssClass: 'custom-style',
// 設置是否顯示三角形圖標
showExpandCollapse: true,
// 可以自定義展開/折疊圖標的HTML代碼
expandIcon: '+',
collapseIcon: '-',
// 設置是否在復選框文字后顯示節點計數
showNodeCount: true,
// 自定義節點計數的HTML代碼
nodeCountElement: '<span class="node-count">[x]</span>',
// 設置選中節點時觸發的回調函數
onCheck: function(node) {
console.log(node);
}
});
});

除此之外，您還可以使用一些其他的方法來操作jQuery checkboxtree，例如：

// 打開所有子節點
$('#tree').checkboxTree('expandAll');
// 折疊所有子節點
$('#tree').checkboxTree('collapseAll');
// 選中指定的節點
$('#tree').checkboxTree('checkNode', $('#node1'));
// 取消選中指定的節點
$('#tree').checkboxTree('uncheckNode', $('#node1'));
// 獲取所有選中的節點
var checkedNodes = $('#tree').checkboxTree('getCheckedNodes');
console.log(checkedNodes);

jQuery checkboxtree非常靈活，易于使用，可以節省您大量的時間和精力。希望本文對您有所幫助，如果您有任何問題或建議，請隨時聯系我們。