最近在做项目时，遇到一个这样的需求，就是在多级菜单中，选中二级的复选框，默认将它下面的三级复选框全部选中，若选中一级的复选框，默认的将它下面的二级的和三级的复选框全部选中，通过JS，可以得到当前页面所有的复选框，但对于如何判断子级的复选框也能选中，就有些不太明白了，向朋友请教了下，呵呵，终于拨云见天了，感谢，方法如下，给遇到我类似需求的朋友一个参考！
1、首先得到当前页面所有的复选框，这个有两种方法：定义最外层的DIV的ID为chks的话
法一：var ipt = document.getElementById("chks").getElementsByTagName("input");
法二：var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
if(inputs[i].type == "checkbox"){}
}
这样也行，只不过法二比较麻烦些。
2、判断级联，其实方法挺简单的，大致这样，一级的ID为a1,a2,a3，二级的为a1b1,a1b2，a2b1,a2b2,a2b3样的，三级的为a1b1c1,a1b1c2,a1b1,c3,a1b2c1,a1b2c2,a1b2c3等等，然后就可以用indexOf来判断是否是子级了，说了这么多，下面将整个代码贴出来。
<html>
<head>
<title></title>
<script type="text/javascript">
function mselect(chk){
var id = [图片上传失败...(image-93f219-1522378863078)]
chk.id
//获取当前复选框的ID
var chked = chk.checked;//将当前复选框选中，
var ipt = document.getElementById("chks").getElementsByTagName("input");
for(var i=0; i<ipt.length; i++){
//判断a1b1是否是a1的子级，若是的话，返回0，若不是，则返回-1
if(ipt[i].id.indexOf(id)>-1){
ipt[i].checked = chked;
}
}
}
</script>
</head>
<body>
<div id="chks">
<input type="checkbox" value="0" id="a001" onclick="mselect(this);" >一级
├──<input type="checkbox" value="0" id="a001001" onclick="mselect(this);" >二级
├──<input type="checkbox" value="0" id="a001002" onclick="mselect(this);" >二级
├──<input type="checkbox" value="0" id="a001002001" onclick="mselect(this);" >三级
├──<input type="checkbox" value="0" id="a001002002" onclick="mselect(this);" >三级
├──<input type="checkbox" value="0" id="a001002003" onclick="mselect(this);" >三级
├──<input type="checkbox" value="0" id="a001002003001" onclick="mselect(this);" >四级
├──<input type="checkbox" value="0" id="a001002003002" onclick="mselect(this);" >四级
├──<input type="checkbox" value="0" id="a001002003003" onclick="mselect(this);" >四级
├──<input type="checkbox" value="0" id="a001002003004" onclick="mselect(this);" >四级
├──<input type="checkbox" value="0" id="a001002003005" onclick="mselect(this);" >四级
├──<input type="checkbox" value="0" id="a001002003006" onclick="mselect(this);" >四级
├──<input type="checkbox" value="0" id="a001002004" onclick="mselect(this);" >三级
├──<input type="checkbox" value="0" id="a001002005" onclick="mselect(this);" >三级
├──<input type="checkbox" value="0" id="a001003" onclick="mselect(this);" >二级
<input type="checkbox" value="0" id="a002" onclick="mselect(this);" >一级
</div>
</body>
</html>
网友评论