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 24 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
javascript动画浅析
Aug 30 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
Python类的多重继承问题深入分析
2014/11/09 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python二分法搜索算法实例分析
2015/05/11 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python输出带颜色字体实例方法
2019/09/01 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
大学生暑期实践感言
2014/02/26 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
小学班级口号大全
2015/12/25 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis