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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
php结合js实现多条件组合查询
May 28 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 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
ip签名探针
2006/10/09 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
基于IView中on-change属性的使用详解
2018/03/15 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
vue观察模式浅析
2018/09/25 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python切片操作实例分析
2018/03/16 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
社区网格化管理实施方案
2014/03/21 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
新学期感想
2015/08/10 职场文书
安全生产协议书
2016/03/22 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书