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对象的代码分享
Nov 02 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 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模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python实现网站注册验证码生成类
2017/06/08 Python
python设置值及NaN值处理方法
2018/07/03 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
安全保证书
2015/01/16 职场文书
推荐信范文大全
2015/03/27 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL