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入门教程(10) 认识其他对象
Jan 31 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
Javascript事件实例详解
Nov 06 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 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循环输出数据库内容的代码
2008/05/24 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php创建session的方法实例详解
2015/01/27 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python实现外卖信息管理系统
2018/01/11 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python内置加密模块用法解析
2019/11/25 Python
Python实现对adb命令封装
2020/03/06 Python
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
绩效专员岗位职责
2013/12/02 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
车间统计员岗位职责
2015/04/14 职场文书