基于JavaScript实现全选、不选和反选效果
2017-02-15 17:20
621 查看
利用javascript实现全选、不选和反选效果,这个不用多说,直接来代码,代码中自有注释帮你理解。
<html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ // 获取所有的按钮 var btns = document.getElementsByTagName("button"); // 获取所有的选项input var inputs = document.getElementsByTagName("input"); // 全选或者不选的时候 调用此函数 function fun(flag){ for (var i=0; i<inputs.length;i++) { inputs[i].checked = flag; } } //获取第一个按钮 “全选” btns[0].onclick = function(){ fun(true); } // 获取第二个按钮 "不选" btns[1].onclick = function(){ fun(false); } // 获取第三个按钮 “反选” btns[2].onclick = function(){ // 遍历所有的选项,判断每一个选项是否被选中 for (var i=0;i<inputs.length;i++) { inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true; } } } </script> </head> <body> <div id="box1"> <button>全选</button> <button>不选</button> <button>反选</button> </div> <div id="box2"> <ul> <li>选项1:<input type="checkbox"></li> <li>选项2:<input type="checkbox"></li> <li>选项3:<input type="checkbox"></li> <li>选项4:<input type="checkbox"></li> <li>选项5:<input type="checkbox"></li> <li>选项6:<input type="checkbox"></li> <li>选项7:<input type="checkbox"></li> <li>选项8:<input type="checkbox"></li> <li>选项9:<input type="checkbox"></li> </ul> </div> </body> </html>
效果展示:
其他实现效果,自行查看!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- 基于JavaScript实现仿京东图片轮播效果
- 基于javascript实现漂亮的页面过渡动画效果附源码下载
- JavaScript中复选框的全选和反选功能的实现
- 基于jQuery实现复选框的全选 全不选 反选功能
- 基于Arcgis for javascript实现百度地图ABCD marker的效果
- javascript实现可全选、反选及删除表格的方法
- 基于JavaScript实现移动端TAB触屏切换效果
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- 前端之美:9个很酷的基于 CSS3 和 JavaScript 实现的效果
- Android GridView实现全选反选效果
- Javascript 实现TreeView CheckBox全选效果
- 9个很酷的基于 CSS3 和 JavaScript 实现的效果
- JavaScript 复选框全选效果&JQuery 实现简单的tab切换效果
- javascript实现全选反选操作并完成删除
- 基于Arcgis for javascript实现百度地图ABCD marker的效果
- 基于Javascript实现弹出页面效果
- javascript实现可全选、反选及删除表格的方法