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 组件之旅(二)编码实现和算法
Oct 28 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 Javascript
JS数组的常用方法整理
Mar 31 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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
如何在python中实现随机选择
2019/11/02 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
如何使用python传入不确定个数参数
2020/02/18 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
老公保证书范文
2014/04/29 职场文书
给校长的建议书500字
2014/05/15 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
实习协议书
2015/01/27 职场文书
考研经验交流会策划书
2015/11/02 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL