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的颜色选择插件实例代码
Oct 02 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python实现机器人卡牌
2019/10/06 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
UNIX文件类型
2013/08/29 面试题
毕业生怎样写好自荐信
2013/11/11 职场文书
销售业务员岗位职责
2014/01/29 职场文书
企业人事任命书
2014/06/05 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫