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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
React降级配置及Ant Design配置详解
Dec 27 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python龙贝格法求积分实例
2020/02/29 Python
Python基于template实现字符串替换
2020/11/27 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
自我鉴定写作要点
2014/01/17 职场文书
党支部书记先进事迹
2014/01/17 职场文书
信息技术课后反思
2014/04/27 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
2015年招生工作总结
2015/05/04 职场文书
圣诞晚会主持词
2015/07/01 职场文书
cf战队宣传语
2015/07/13 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python