javaScript实现复选框全选反选事件详解


Posted in Javascript onNovember 20, 2020

本文实例为大家分享了javaScript实现复选框全选反选的具体代码,供大家参考,具体内容如下

javaScript实现复选框全选反选事件详解

代码

<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <title></title>

 <script>

 window.onload=function(){
  var selAll=document.getElementById("selAll");
  var hobbys=document.getElementsByName("hobby");
  var fx=document.getElementById("fx");  
  var myClick=document.getElementById("xz");

  function myClick(){   
  alert("hello");
  }


  //全选事件
  selAll.onclick=function(){
  if(selAll.checked == true){
   for ( var i=0; i<hobbys.length; i++) {
   hobbys[i].checked=true;
   }
  }else{
   for ( var i=0; i<hobbys.length; i++) {
   hobbys[i].checked=false;
   }
  }


  }

  //反选事件
  fx.onclick=function(){

  for (var i=0; i<hobbys.length; i++) {
   var b=hobbys[i];
   if (b.checked == true) {
   b.checked=false
   }else{
   b.checked=true;
   }
  }

  }
 }
 </script>
</head>
<body>

 <span onclick="myClick()" id="xz"><input type="checkbox" id="selAll"/>全选</span>
 <button id="fx">反选</button></br>
 <input type="checkbox" name="hobby" />羽毛球
 <input type="checkbox" name="hobby"/>绘画
 <input type="checkbox" name="hobby"/>唱歌
 <input type="checkbox" name="hobby"/>跳舞
</body>
</html>

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

Javascript 相关文章推荐
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
jQuery的ready方法详解
Nov 27 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
Vue响应式原理详解
Apr 18 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
javaScript实现滚动条事件详解
Mar 24 #Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 #Javascript
深入掌握 react的 setState的工作机制
Sep 27 #Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 #Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 #Javascript
微信小程序 按钮滑动的实现方法
Sep 27 #Javascript
详解Vue-cli代理解决跨域问题
Sep 27 #Javascript
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python学习开发mock接口
2019/04/28 Python
ipython和python区别详解
2019/06/26 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
python实现与redis交互操作详解
2020/04/21 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
生物技术专业毕业生求职信范文
2013/12/14 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
企业年会主持词
2014/03/27 职场文书
出售房屋委托书范本
2014/09/24 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
大班下学期个人总结
2015/02/13 职场文书
储备店长岗位职责
2015/04/14 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android