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 相关文章推荐
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
js实现简单分页导航栏效果
Jun 28 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
Python Socket编程详细介绍
2017/03/23 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python中反射和描述器总结
2018/09/23 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python 两个数据库postgresql对比
2019/10/21 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
自荐信的基本格式
2014/02/22 职场文书
公司聘任书模板
2014/03/29 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
离婚协议书范本2014
2014/10/27 职场文书
语文教师求职信范文
2015/03/20 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
环保守法证明
2015/06/24 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Java实现二分搜索树的示例代码
2022/03/17 Java/Android