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 相关文章推荐
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
JS字符串处理实例代码
Aug 05 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
js实现通过开始结束控制的计时器
Feb 25 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
使用JS实现动态时钟
Mar 12 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
浅谈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
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python实现简单的文字识别
2018/11/27 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
教学评估实施方案
2014/03/16 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
挂职学习心得体会
2014/09/09 职场文书
房屋出售授权委托书
2014/10/12 职场文书
购房委托书
2014/10/15 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript