JS实现CheckBox复选框全选、不选或全不选功能
更新时间：2021年04月11日 15:11:32 投稿：lijiao
CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭，如一次性处理多个产品，或对文章的删除、产品的下架等处理，一条一条的点显然有一些麻烦，如果能每一行放一个checkbox，然后统一处理就好办的多了，需要的朋友可以参考下
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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
这篇文章主要介绍了JS 生态系统加速Polyfill函数使用实例探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
javascript实现的一个自定义长度的文本自动换行的函数。
javascript实现的一个自定义长度的文本自动换行的函数。...2007-08-08
今天小编就为大家分享一篇浅谈layui里的上传控件问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了Javascript作用域和作用域链原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了js获得网页背景色和字体色的方法,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了JS使用cookie实现DIV提示框只显示一次的方法,涉及JavaScript基于cookie标记控制页面元素样式修改的技巧,需要的朋友可以参考下2015-11-11
虽然JavaScript有很多的编程方法，但这里只挑选了10个技巧，这些技巧对初学者理解JavaScript来说是很好的的起点。2010-09-09
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
下面小编就为大家带来一篇基于js原生和ajax的get和post方法以及jsonp的原生写法实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
封装好的省市地区联动控件附下载...2007-08-08
这篇文章主要介绍了浅谈es6中的元编程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
最新评论