原生js的联动全选
2020-02-03 23:13
579 查看
开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>联动全选</title> </head> <script> window.onload = function(){ // 在input外部添加一个box, 作用:为了更加精准的获取到要操作的input标签 var oBox = document.getElementById('box'); var aInput = oBox.getElementsByTagName('input'); var oBtn = document.getElementById('btn'); // 点击全选按钮的操作 oBtn.onclick = function(){ if(this.checked == true){ // 如果当前按钮使选中的状态,就让下面所有的选中 for(var i=0;i<aInput.length;i++){ aInput[i].checked = true; } }else{ for(var i=0;i<aInput.length;i++){ aInput[i].checked = false; } } } // 给每一个子集按钮都加上点击事件 for(var i=0;i<aInput.length;i++){ aInput[i].onclick = function(){ var n = 0; for(var i=0;i<aInput.length;i++){ if(aInput[i].checked == true){ n++; } } // document.title = n; if(n == aInput.length){ oBtn.checked = true; }else{ oBtn.checked = false; } } } } </script> <body> <input type="checkbox" id="btn"/>全选 <br /> <br /> <div id="box"> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /> </div> </body> </html>
转载于:https://www.cnblogs.com/lisaShare/p/10396231.html
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 原生js用ajax编写省市联动,二级联动
- 原生JS实现全选与反选和jquery全选与反选
- 省市区联动(原生js实现)
- 移动端纯原生JS不依赖ajax后台服务器实现省市县三级联动
- 前端左右列表联动,目前没有找到好的插件,以后使用到的话自己使用原生的js,html,css写
- 原生JS实现三级联动
- 原生js全选,反选,不选
- 原生js写的一个全选,不全选功能。
- 移动端纯原生JS不依赖AJAX后台服务器实现省市县三级联动
- jquery另一种全选,全不选,反选的方式(与原生js混合使用)
- 原生js三级联动的简单实现代码
- web前端_原生js_全选功能
- 原生js网页功能案列-02- 全部不选反选 一个没有选则全选按钮就不选
- 原生JS方法写三级联动
- 原生js实现的ul li 二级联动
- 原生JS实现的城市三级联动
- 原生js实现全选全部选
- 用原生js实现复选框选择以及全选非全选功能 (待看)
- 用原生JS实现简单的省市二级联动
- 原生js二级联动效果