2018-03-30

最近在做项目时,遇到一个这样的需求,就是在多级菜单中,选中二级的复选框,默认将它下面的三级复选框全部选中,若选中一级的复选框,默认的将它下面的二级的和三级的复选框全部选中,通过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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容