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


Posted in Javascript onMay 06, 2015

 CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。大多数应用程序的“设置”对话框内均有此控件。我们看到的可以打勾的就是CheckBox。

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

    CheckBox复选框JS实现全选全不选功能,很简单,就只需插入一小段js函数就行了。。。

<script language="javascript">
 function cli(Obj)
 {
 var collid = document.getElementByIdx_x("all")
 var coll = document.getElementsByName(Obj)
 if (collid.checked){
  for(var i = 0; i < coll.length; i++)
  coll[i].checked = true;
 }else{
  for(var i = 0; i < coll.length; i++)
  coll[i].checked = false;
 }
 }
 </script>

下面是一组CheckBox复选框html代码
<input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('多选项名称');"> 全选
<input name='多选项名称' type='checkbox' value='' > A
<input name='多选项名称' type='checkbox' value='' > B
<input name='多选项名称' type='checkbox' value='' > C
<input name='多选项名称' type='checkbox' value='' > D
<input name='多选项名称' type='checkbox' value='' > E
<input name='多选项名称' type='checkbox' value='' > F

好了,你可以复制一下以上的代码,修改测试一下。。。

这里三水点靠木小编推荐大家看下这篇文章:https://3water.com/article/96022.htm

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

Javascript 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 #Javascript
js实现滑动触屏事件监听的方法
May 05 #Javascript
JS根据生日算年龄的方法
May 05 #Javascript
js改变Iframe中Src的方法
May 05 #Javascript
js网页滚动条滚动事件实例分析
May 05 #Javascript
jquery判断单选按钮radio是否选中的方法
May 05 #Javascript
JQuery中Bind()事件用法分析
May 05 #Javascript
You might like
php 结果集的分页实现代码
2009/03/10 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python制作动态字符图的实例
2019/01/27 Python
python字典的遍历3种方法详解
2019/08/10 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python中time库的实例使用方法
2019/10/31 Python
Django ORM filter() 的运用详解
2020/05/14 Python
python中wheel的用法整理
2020/06/15 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
高中毕业生生活的自我评价
2013/12/08 职场文书
我的祖国演讲稿
2014/05/04 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
答谢词范文
2015/01/05 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记