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 相关文章推荐
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
Angular简单验证功能示例
Dec 22 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 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
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
深入学习Python中的装饰器使用
2016/06/20 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python占位符输入方式实例
2019/05/27 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python将音频进行变速的操作方法
2020/04/08 Python
零基础小白多久能学会python
2020/06/22 Python
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
毕业生在校学习的自我评价分享
2013/10/08 职场文书
学习标兵获奖感言
2014/02/20 职场文书
质量负责人任命书
2014/06/06 职场文书
房屋维修协议书范本
2014/09/25 职场文书
导游词开场白
2015/01/31 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
Python常遇到的错误和异常
2021/11/02 Python