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压缩利器
Feb 20 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 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
一些常用的php函数
2006/12/06 PHP
mysql时区问题
2008/03/26 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
PHP数组实例详解
2016/06/26 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
Angular实现响应式表单
2017/08/04 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python dlib人脸识别代码实例
2019/04/04 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
JAVA代码查错题
2014/10/10 面试题
护理自荐信
2013/10/22 职场文书
幼儿教师求职信
2014/05/24 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2015年重阳节主持词
2015/07/04 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Golang实现AES对称加密的过程详解
2021/05/20 Golang
javascript实现计算器功能详解流程
2021/11/01 Javascript