js实现全选或全不选,类似email的效果
来源:互联网 发布:淘宝三了个七什么意思 编辑:程序博客网 时间:2024/04/28 07:00
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div><input type="checkbox" id="checkAll"/>全选/全不选</div> <ul> <li><input type="checkbox" class="cb" /> 1......</li> <li><input type="checkbox" class="cb" /> 2......</li> <li><input type="checkbox" class="cb" /> 3......</li> <li><input type="checkbox" class="cb" /> 4......</li> <li><input type="checkbox" class="cb" /> 5......</li> </ul> </body> <script> // 依据标签的class属性获取标签对象,这个能精确定位 var inputs = document.getElementsByClassName('cb'); var checkAll=document.getElementById('checkAll'); /* * 匿名函数只针对checkAll的点击事件 */ // 全选、全不选 checkAll.onclick = function(){ for (var i=0;i<inputs.length;i++){ inputs[i].checked = this.checked; // 1. 自己是否被选上 // this,指的是当前的标签,在这里指的是<input type="checkbox" id="checkAll"/> // 2. 如果被选上把其它的也勾选上 // 3. 否则其它的也不勾选 } }; for(var i=0;i<inputs.length;i++){ inputs[i].onclick=function(){ if(!this.checked){ // 当 inputs有一个不选时,checkAll不选 checkAll.checked=false; } // 当inputs全选时,checkAll选中 checkAll.checked = true; for (var j=0;j<inputs.length;j++){ if (inputs[j].checked == false){ checkAll.checked = false; break; } } } } </script></html>
当inputs全选时,checkAll选中也可以写成这样:
var status = true; for (var j=0;j<inputs.length;j++){ if (inputs[j].checked == false){ status = false; break; } } checkAll.checked = status;
0 0
- js实现全选或全不选,类似email的效果
- JS实现全选、全不选的email效果
- js 实现全选或全不选的功能
- 实现全选或全不选js
- js实现简单的checkbox全选和取消全选效果
- 用js实现类似jquery里的animate动画效果
- js 实现长按效果(类似安卓的)
- js实现全选全不选
- JS实现的全选/全不选功能按钮
- js实现多选框的全选/全不选
- JQuery实现全选全不选效果
- jquery实现全选 全不选效果
- 实现全选和全不选功能效果的实现代码
- 使用JS实现类似屏幕保护效果
- js简单实现类似图片切换效果
- 类似NumberPicker的效果实现
- 类似horizon效果的实现
- JS实现DataGrid的全选
- 面试感悟---一名3年工作经验的程序员应该具备的技能(转载)
- java开发,大小写的坑,你可曾遇到?
- 使用git出现的问题
- java扑克牌小程序
- 24位BMP位图转换成ASCII码字符图
- js实现全选或全不选,类似email的效果
- 网络配置RHCE-Day6
- ECShop配置
- 关于如何使用pager-taglib分页
- AppbarLayout中Toolbar包含了子view时设置标题颜色
- 大数据串讲-从日志文件分析访问量最高的10个接口及响应访问量
- 从tcp到led
- 二叉排序树(二叉查找树)BST构造,节点插入,节点查找,节点删除(java)
- 结构化查询语言分类