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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
js实现日历的简单算法
Jan 24 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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
信用卡效验程序
2006/10/09 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
python manage.py runserver流程解析
2019/11/08 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
浅谈Python3中print函数的换行
2020/08/05 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
环境工程专业自荐信范文
2014/06/24 职场文书
七一建党日演讲稿
2014/09/05 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2014年检验科工作总结
2014/11/22 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
入党申请书怎么写?
2019/06/11 职场文书