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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
浅谈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批量生成缩略图的代码
2008/07/19 PHP
openPNE常用方法分享
2011/11/29 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
ucenter通信原理分析
2015/01/09 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
Python发送Email方法实例
2014/08/21 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
大学生优秀团员事迹材料
2014/01/30 职场文书
《白鹅》教学反思
2014/04/13 职场文书
机械专业求职信
2014/05/25 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
小学科学教学计划
2015/01/21 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python