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配合css简单实现返回顶部效果
Sep 30 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
微信小程序 教程之引用
Oct 18 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
vue实现路由监听和参数监听
Oct 29 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字符串分割函数explode的实例代码
2013/02/07 PHP
探讨php中header的用法详解
2013/06/07 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
php简单smarty入门程序实例
2015/06/11 PHP
joomla数据库操作示例代码
2016/01/06 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
python内存管理分析
2015/04/08 Python
用C++封装MySQL的API的教程
2015/05/06 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
pytorch梯度剪裁方式
2020/02/04 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
优秀学生自我鉴定范例
2013/12/18 职场文书
爱国演讲稿400字
2014/05/07 职场文书
大学生党员自我评价
2015/03/04 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
python中print格式化输出的问题
2021/04/16 Python