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 相关文章推荐
javascript下利用arguments实现string.format函数
Aug 24 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
详解JS模块导入导出
Dec 20 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
使用jQuery实现购物车
Oct 29 jQuery
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 file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
php一个找二层目录的小东东
2012/08/02 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php微信开发之上传临时素材
2016/06/24 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jquery插件之easing使用
2010/08/19 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
继电保护工岗位职责
2014/01/05 职场文书
元旦晚会感言
2014/03/12 职场文书
护士自我鉴定总结
2014/03/24 职场文书
购房协议书
2014/04/11 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
组织生活会发言材料
2014/12/15 职场文书
纪检监察立案决定书
2015/06/24 职场文书