一個很簡單jquery復(fù)選框樹形結(jié)構(gòu)，點擊父節(jié)點超燃，子節(jié)點全部選中（全部不選中）华弓，只要有一個子節(jié)點處于選中的狀態(tài)座硕，父節(jié)點就處于選中的狀態(tài),分別給父節(jié)點和子節(jié)點點擊事件扛吞，判斷當前是否處于選中的狀態(tài)鹃觉，再進行處理厢钧，最后的結(jié)果如下圖：
css:
.div_inline {
display:inline;
}
/* 設(shè)置子節(jié)點屬性 */
.tree_node_child {
margin-left:50px;
}
html:
<div class="tree_content">
<div class="tree_node">
<div class="div_inline"><input type="button" value="+" class="tree_node_toggle_button"></div>
<div class="div_inline tree_node_parent">
<input type="checkbox" class="tree_node_parent_checkbox" value="高分一號" name="gf">高分一號
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox" value="PMI1">PMI1<br>
<input type="checkbox" class="tree_node_child_checkbox" value="PMI2">PMI2<br>
<input type="checkbox" class="tree_node_child_checkbox" value="PMI3">PMI3<br>
</div>
</div>
</div>
<div class="tree_node">
<!-- 切換子目錄隱藏或顯示的按鈕 -->
<div class="div_inline"><input type="button" value="+" class="tree_node_toggle_button"></div>
<div class="div_inline tree_node_parent">
<input type="checkbox" class="tree_node_parent_checkbox" value="高分二號" name="gf">高分二號
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox" value="PMI1">PMI1<br>
<input type="checkbox" class="tree_node_child_checkbox" value="PMI2">PMI2<br>
<input type="checkbox" class="tree_node_child_checkbox" value="PMI3">PMI3<br>
</div>
</div>
</div>
<div class="tree_node">
<div class="div_inline"><input type="button" value="+" class="tree_node_toggle_button"></div>
<div class="tree_node_parent div_inline">
<input type="checkbox" class="tree_node_parent_checkbox" value="高分三號" name="gf">高分三號
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox" value="全部">全部<br>
</div>
</div>
</div>
<div class="tree_node">
<div class="div_inline"><input type="button" value="+" class="tree_node_toggle_button"></div>
<div class="tree_node_parent div_inline">
<input type="checkbox" class="tree_node_parent_checkbox" value="高分四號" name="gf">高分四號
<div class="tree_node_child">
<input type="checkbox" class="tree_node_child_checkbox" value="全部">全部<br>
</div>
</div>
</div>
</div>
js：
// 頁面加載完成后調(diào)用
$(function(){
// 為所有的父節(jié)點添加點擊事件
$(".tree_node_parent_checkbox").click(function(){
// 獲取父節(jié)點是否選中
var isChange = $(this).prop("checked");
if(isChange){ // 如果選中,則父節(jié)點下的所有的子節(jié)點都選中
// 獲取當前checkbox節(jié)點的兄弟節(jié)點下的所有的checkbox子節(jié)點選中
$(this).next().find(".tree_node_child_checkbox").prop("checked", true);
}else{ // 未選中鳞尔，取消全選
// 獲取當前checkbox節(jié)點的兄弟節(jié)點下的所有的checkbox子節(jié)點選中
// $(this).next().find(".tree_node_child_checkbox").removeAttr("checked");
$(this).next().find(".tree_node_child_checkbox").prop("checked",false);
}
});
// 為所有的子節(jié)點添加點擊事件
$(".tree_node_child_checkbox").click(function () {
// 獲取選中的節(jié)點的父節(jié)點下的所有子節(jié)點選中的數(shù)量
var length = $(this).parent().find(".tree_node_child_checkbox:checked").length;
// 判斷當前結(jié)點是否選中
if($(this).prop("checked")){ // 選中
// 如果當前節(jié)點選中后,所有的選中節(jié)點數(shù)量1，選中父節(jié)點
if(length == 1){
// 選中父節(jié)點
$(this).parent().prev().prop("checked", true);
}
}else{ // 節(jié)點未選中
if(length == 0){
// 取消父節(jié)點的選中狀態(tài)
$(this).parent().prev().removeAttr("checked");
$(this).parent().prev().prop("checked",false)
}
}
});
// 為所有的切換按鈕添加點擊事件
$(".tree_node_toggle_button").click(function () {
// 獲取需要隱藏或顯示的節(jié)點
var $toggle_node = $(this).parent().next().find(".tree_node_child");
$toggle_node.toggle(); // 切換隱藏或顯示
// 切換按鈕的顯示
if($toggle_node[0].style.display=="none"){
$(this).val("+");
}else{
$(this).val("-");
}
});
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
