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版本的代码
Sep 03 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python条件和循环的使用方法
2013/11/01 Python
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python多线程编程中的join函数使用心得
2014/09/02 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
详解python中的Turtle函数库
2018/11/19 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
linux下进程间通信的方式
2014/12/23 面试题
新闻编辑自荐书范文
2014/02/12 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
校园环保建议书
2014/05/14 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
检讨书1000字
2014/10/11 职场文书
活着观后感
2015/06/03 职场文书
争做文明公民倡议书
2019/06/24 职场文书
python析构函数用法及注意事项
2021/06/22 Python