通过JS,全选当前页面所有的复选框

摘要:
当我最近在做一个项目时,我遇到了一个要求,即在多级菜单中,选中第二级的复选框。默认情况下,将选中其下面第三级的所有复选框。如果选中了第一级的复选框,则默认情况下将选中第二级及其以下第三级的所有复选框。通过JS,我可以获取当前页面的所有复选框。但我不知道如何判断儿童级别的复选框,我向朋友征求了意见。哈哈,我终于透过云层看到了天空。非常感谢。以下是如何为满足我类似需求的朋友提供参考!

  最近在做项目时,遇到一个这样的需求,就是在多级菜单中,选中二级的复选框,默认将它下面的三级复选框全部选中,若选中一级的复选框,默认的将它下面的二级的和三级的复选框全部选中,通过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 = 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" onclick="mselect(this);" >一级<br>
&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >二级<br>
&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >二级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >三级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >三级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >三级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >四级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >四级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >四级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);" >四级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >四级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >四级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >三级<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >三级<br>
&nbsp;&nbsp;&nbsp;├──<input type="checkbox" value="0" onclick="mselect(this);"  >二级<br>
<input type="checkbox" value="0" onclick="mselect(this);"  >一级<br>
</div>
</body>
</html>

运行前后的效果图如下:

通过JS,全选当前页面所有的复选框第1张  通过JS,全选当前页面所有的复选框第2张

免责声明:文章转载自《通过JS,全选当前页面所有的复选框》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇iis虚拟目录引发的路径问题Android中数据库的操作流程详解下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS中常遇到的浏览器兼容问题和解决方法【转】

今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上; 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽...

input type="submit" 和"button"的区别及表单提交

在一个页面上画一个按钮,有四种办法: 1 <input type="button" /> 这就是一个按钮。如果你不写javascript 的话,按下去什么也不会发生。 2 <input type="submit" /> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它。 3 <butto...

对require.js 的使用进行总结

一、为什么要使用require.js       首先一个页面如果在加载多个js文件的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。       require.js,就是为了解决这两个问题:       (1)实现...

linux下如何模拟按键输入和模拟鼠标

http://blog.chinaunix.net/u3/94700/showart_2211516.html 查看/dev/input/eventX是什么类型的事件, cat /proc/bus/input/devices设备有着自己特殊的按键键码,我需要将一些标准的按键,比如0-9,X-Z等模拟成标准按键,比如KEY_0,KEY-Z等,所以需要用到按键...

Linux/Android——input_handler之evdev (四) 【转】

转自:http://blog.csdn.net/u013491946/article/details/72638919 版权声明:免责声明: 本人在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系 .挖...

js css等静态文件版本控制,一处配置多处更新.net版【原创】

日常web开发中,我们修改了js、css等静态资源文件后,如果文件名不变的话,客户端浏览并不会及时获取最新的资源文件,这就很尴尬了 怎么办呢? 1.小白:让客户清除缓存?,No ,不靠谱 2.初级:把文件名改了?,可以,但我们产品样式一天更新8百次,怎么办?不方便 <link href="/css/old.css"rel="stylesheet"ty...