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库的方法
Feb 12 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
vscode自定义vue模板的实现
Jan 27 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
php获取地址栏信息的代码
2008/10/08 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
制作特殊字的脚本
2006/06/26 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
JSON取值前判断
2014/12/23 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
python简单读取大文件的方法
2016/07/01 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
培训主管的岗位职责
2013/11/23 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
篝火晚会主持词
2014/03/25 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python
Python测试框架pytest高阶用法全面详解
2022/06/01 Python