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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
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 Google的translate API代码
2008/12/10 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
pycharm安装图文教程
2017/05/02 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
python中np是做什么的
2020/07/21 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
管理站站长岗位职责
2013/11/27 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
珠宝店促销方案
2014/03/21 职场文书
正科级干部考察材料
2014/05/29 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL