js实现全选和全不选


Posted in Javascript onJuly 28, 2020

本文实例为大家分享了js实现全选和全不选的具体代码,供大家参考,具体内容如下

非常简洁的几行原生js实现全选和全不选,大神们可以在此基础上加上反选功能。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>全选、全不选</title>
</head>
<body>
<table border="1">
 <tr>
 <td><input type="checkbox" name="mmAll" onclick="All(this, 'mm[]')"></td>
 </tr>
 <tr><td><input type="checkbox" value="1" name="mm[]" class="check" id="ids1" onclick="Item(this, 'mmAll')"></td></tr>
 <tr><td><input type="checkbox" value="2" name="mm[]" class="check" id="ids2" onclick="Item(this, 'mmAll')"></td></tr>
 <tr><td><input type="checkbox" value="3" name="mm[]" class="check" id="ids3" onclick="Item(this, 'mmAll')"></td></tr>
 <tr><td><input type="checkbox" value="4" name="mm[]" class="check" id="ids4" onclick="Item(this, 'mmAll')"></td></tr>
 <tr><td><input type="checkbox" value="5" name="mm[]" class="check" id="ids5" onclick="Item(this, 'mmAll')"></td></tr>
 <tr><td><input type="checkbox" value="6" name="mm[]" class="check" id="ids6" onclick="Item(this, 'mmAll')"></td></tr>
</table>
</body>
</html>
<script type="text/javascript">
 //Check all
 function All(e, itemName)
 {
  var aa = document.getElementsByName(itemName);
  for (var i=0; i < aa.length; i++)
 
   aa[i].checked = e.checked; //得到那个总控的复选框的选中状态 
 }
 
 //Single select
 function Item(e, allName)
 {
  var all = document.getElementsByName(allName)[0];
  if(!e.checked) all.checked = false;
  else
  {
   var aa =document.getElementsByName(e.name);
   for (var i=0; i<aa.length; i++)
    if(!aa[i].checked) return;
   all.checked= true;
  }
 }
</script>

效果图: 

js实现全选和全不选

更多关于复选框的文章请点击专题:javascript复选框操作汇总、jquery复选框操作汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 #Javascript
js实现全选和全不选功能
Jul 28 #Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 #Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 #Javascript
Postman如何实现参数化执行及断言处理
Jul 28 #Javascript
微信小程序实现电子签名功能
Jul 29 #Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 #Javascript
You might like
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
php如何获取Http请求
2020/04/30 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
初识Javascript小结
2015/07/16 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
django的autoreload机制实现
2020/06/03 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
上海中网科技笔试题
2012/02/19 面试题
优秀求职信范文分享
2013/12/19 职场文书
初中地理教学反思
2014/01/11 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
新员工考核评语
2014/12/31 职场文书