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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
详解Puppeteer 入门教程
May 09 Javascript
js实现适配移动端的拖动效果
Jan 13 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写MySQL数据 实现代码
2009/06/15 PHP
php 显示指定路径下的图片
2009/10/29 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
JavaScript实现表单验证功能
2020/12/09 Javascript
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python读写LMDB文件的方法
2018/07/02 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python yield的用法实例分析
2020/03/06 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
教你怎样写好自我评价
2013/10/05 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
出生医学证明书
2014/09/15 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
劳动仲裁调解书
2015/05/20 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript