JavaScript实现复选框全选或全取消操作
【JavaScript实现复选框全选或全取消操作】本文实例为大家分享了JavaScript实现复选框全选或全取消的具体代码,供大家参考,具体内容如下
实现思路
1、获取总选框、所有小选框元素对象
2、按钮控制小按钮- - -给总选框绑定onclick点击事件,事件处理程序- - -for循环遍历所有小选框,将总选框的- - -checked属性值- - -赋值给它们
3、小按钮影响总按钮- - -for循环 给每个小复选框绑定点击事件,每次点击都 for循环 检查所有的复选框是否被选中:
设置一个变量 flag 控制总按钮的选中状态,初始值为 true ,for循环遍历检查各小复选框选中状态,只要有一个没有选上,flag = false,break 跳出循环不再检查后面的小复选框状态,最后 总按钮checked属性值 = flag
注意:在html中选中状态 checked = “checked”,但是在js中,选中状态- - -checked = true;
未选中状态- - -checked = false;
建议:这种取属性值的,可以在控制台打印一下,看下值是多少
代码示例
多选框 - 锐客网 .box {width: 300px; margin: 100px auto; }thead {color: #fff; background-color: #008dd0; }
运动 跑步 跳绳 瑜伽 游泳 骑行
页面效果:
文章图片
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 事件代理
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 数组常用方法一
- 人脸识别|【人脸识别系列】| 实现自动化妆