复选框的思路
复选框的主要问题就是多个框以及父子框之间的联系以及因果关系,然后编写时有两个思路。
先暂写一个思路一，剩下的下次再补
源码
<ul id="tree">
<li><input type="checkbox" value="1">1
<ul>
<li>
<input type="checkbox" value="1">2
<ul>
<li><input type="checkbox" value="1">3
<ul>
<li><input type="checkbox" value="1">4
<ul>
<li><input type="checkbox" value="1">5</li>
<li><input type="checkbox" value="1">5</li>
<li><input type="checkbox" value="1">5</li>
</ul>
</li>
<li><input type="checkbox" value="1">4</li>
<li><input type="checkbox" value="1">4</li>
<li><input type="checkbox" value="1">4</li>
</ul>
</li>
<li><input type="checkbox" value="1">3
<ul>
<li><input type="checkbox" value="1">4</li>
</ul>
</li>
<li><input type="checkbox" value="1">3</li>
<li><input type="checkbox" value="1">3</li>
<li><input type="checkbox" value="1">3</li>
</ul>
</li>
<li>
<input type="checkbox" value="1">2
<ul>
<li><input type="checkbox" value="1">3
<ul>
<li><input type="checkbox" value="1">4
<ul>
<li><input type="checkbox" value="1">5</li>
<li><input type="checkbox" value="1">5</li>
<li><input type="checkbox" value="1">5</li>
</ul>
</li>
<li><input type="checkbox" value="1">4</li>
<li><input type="checkbox" value="1">4</li>
<li><input type="checkbox" value="1">4</li>
</ul>
</li>
<li><input type="checkbox" value="1">3
<ul>
<li><input type="checkbox" value="1">4</li>
</ul>
</li>
<li><input type="checkbox" value="1">3</li>
<li><input type="checkbox" value="1">3</li>
<li><input type="checkbox" value="1">3</li>
</ul>
</li>
</ul>
</li>
</ul>
js
<script src="js/jquery.min.js"></script>
<script>
//该代码接受无限下级复选框，但是需要计算第二级复选框的父级位置
$("input:checkbox").click(function () {
let alllength = $(this).parents().length - 6
// console.log("当前所有父级",$(this).parents())
if ($(this).prop("checked") == true) {
$(this).parents().children("input:checkbox").prop("checked", true); //点击后所有父元素被选中
$(this).parent("li").find("input:checkbox").prop("checked", true); //点击后所有子元素被选中
} else {
// console.log($(this).parent().siblings("li").children("input[type='checkbox']:checked").length)
//当前点击框的兄弟元素有多少个被选中
if ($(this).parent().siblings("li").children("input[type='checkbox']:checked").length == 0)
//判断其他兄弟选框是否被选中
{
if ($(this).parents().eq(alllength).siblings("li").children(
"input[type='checkbox']:checked").length == 0 && $(this).parents("li").find(
"input[type='checkbox']:checked").length == 0)
//判断父级的兄弟的选框中是否存在选中
{
$(this).parents().children("input:checkbox").prop("checked", false)
$(this).parent("li").find("input:checkbox").prop("checked", false);
} else {
$(this).parent("li").find("input:checkbox").prop("checked", false);
$(this).parent().parent().siblings("input:checkbox").prop("checked", false)
}
} else {
$(this).parent("li").find("input:checkbox").prop("checked", false);
}
if ($(this).parents("li").find("input[type='checkbox']:checked").length == 1) {
$(this).parents("li").find("input[type='checkbox']:checked").prop("checked", false)
}
}
})
</script>
注：该代码功能，可实现点击子框，所有父框都被选中，点击单一且有子的框时也可以做到全选子元素和直系父框，目前缺点：可添加下级复选框，然需要计算第二级复选框的位置信息，同时，单选取消子元素时，只有第一级直系父框会一并取消，其他直系父元素无反应，此代码缺陷不少，但复选框的思路相对完善，可供参考购物车类项目思路。
拓展：复选框的选中时影响其他选框相对简单，但是取消时与其他选框的逻辑结构相对繁琐，需要深入考虑。
思路二
复选框的第二个思路，这个思路就不太需要去考虑那么多了，简单来说就是zTree – jQuery 树插件，这个插件还是相对完善的，用法就简单记录一下，首先，自然是下载资源包，然后引入
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="js/jquery.ztree.all.js"></script>
然后就是配置setting
var zNodes = []; //这个是节点数组
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false,
showIcon: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {
"Y": "s",
"N": "s"
} //这个是父子关系的影响，具体的话还是查文档
},
};
$(function () {
// show()
zNodes = [{
id: "200000",
pId: "0",
name: "4",
checked: false
},
{
id: "2000000",
pId: "0",
name: "1",
checked: true
}, {
id: "400000",
pId: "0",
name: "2",
checked: false
}, {
id: "3000000",
pId: "0",
name: "3",
checked: false
},
]
$.fn.zTree.init($("#regionZTree"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("regionZTree");
})
var lstMenu = []
saveTreeBtn = function () {
//保存选择菜单
// zTree = $.fn.zTree.getZTreeObj("ztree");
var nodes = zTree.getCheckedNodes(true);
// $scope.editData.lstMenu=[{"id":"100000"}];
lstMenu = [];
for (var i = 0; i < nodes.length; i++) {
console.log(nodes[i].id);
lstMenu.push({
"id": nodes[i].id
})
}
console.log(lstMenu)
}