JS实现CheckBox复选框全选、不选或全不选功能


Posted in Javascript onJuly 28, 2020

CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0)。在应用程序中使用该控件为用户提供“True/False”或“yes/no”的选择。因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合。

CheckBox复选框JS实现全选、不选、全不选功能,很简单,具体内容如下

思路:

  • 1、获取元素
  • 2、给全选 不选 反选添加点击事件
  • 3、用for循环checkbox
  • 4、把checkbox的checked设置为true即实现全选
  • 5、把checkbox的checked设置为false即实现不选
  • 6、通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。

html代码:

<input type="button" value="全选" id="sele"/>
 <input type="button" value="不选" id="setinterval"/>
 <input type="button" value="反选" id="clear"/>
  <div id="checkboxs">
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
</div>

js代码:

<script>
window.onload=function(){

var sele=document.getElementById('sele');//获取全选
var unsele=document.getElementById('setinterval');//获取不选
var clear=document.getElementById('clear');//获取反选
var checkbox=document.getElementById('checkboxs');//获取div
var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}

//不选
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反选
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}


}
</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
div模拟选择框示例代码
Nov 03 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 #Javascript
简单实现js选项卡切换效果
Feb 03 #Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 #Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 #Javascript
javascript自定义滚动条实现代码
Apr 20 #Javascript
JavaScript File API实现文件上传预览
Feb 02 #Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 #Javascript
You might like
php下封装较好的数字分页方法
2010/11/23 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python打开文件的方式有哪些
2020/06/29 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
如何提高MySql的安全性
2014/06/19 面试题
体育馆的标语
2014/06/24 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
导游欢迎词范文
2015/01/23 职场文书
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
Windows7下FTP搭建图文教程
2022/08/05 Servers