Js实现复选框的全选、全不选反选功能代码实例


Posted in Javascript onFebruary 28, 2020

主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复选框的选择</title>
  <style>
    #btn{
      margin: 5px auto;
    }
    #btn>input{
      font-size: 16px;
      color: #fff;
      background-color: rgb(110, 34, 182);
      outline: none;
    }
    #city{
      background-color: aqua;
    }
  </style>

  <script>
    window.onload=function(){

      var obt1 = document.getElementById('btn1');
      var obt2 = document.getElementById('btn2');
      var obt3 = document.getElementById('btn3');
      var ocity = document.getElementById('city');
      var oinput = ocity.getElementsByTagName('input');

      obt1.onclick=function(){
        for(var i=0;i<oinput.length;i++)
        {
          oinput[i].checked=true;
        }
      }
      obt2.onclick=function(){
        for(var i=0;i<oinput.length;i++)
        {
          oinput[i].checked=false;
        }
      }
      obt3.onclick=function(){
        for(var i=0;i<oinput.length;i++)
        {
          if(oinput[i].checked==false)
          {
            oinput[i].checked=true;
          }else{
            oinput[i].checked=false;
          }
        }
      }
    }
  </script>
</head>
<body>
  <div id="btn">
    <input type="button" id="btn1" value="全选">
    <input type="button" id="btn2" value="全不选">
    <input type="button" id="btn3" value="反选">
  </div>
  <div id="city">
    <input type="checkbox">北京<br>
    <input type="checkbox">上海<br>
    <input type="checkbox">广州<br>
    <input type="checkbox">深圳<br>
    <input type="checkbox">武汉<br>
  </div>
</body>
</html>

结果

Js实现复选框的全选、全不选反选功能代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
JavaScript接口实现方法实例分析
May 16 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 #Javascript
JsonServer安装及启动过程图解
Feb 28 #Javascript
Vue自定义组件的四种方式示例详解
Feb 28 #Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 #Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 #Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 #Javascript
vue 中的 render 函数作用详解
Feb 28 #Javascript
You might like
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
使用python Django做网页
2013/11/04 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
管理部部长岗位职责
2013/12/05 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
招聘专员岗位职责
2014/03/07 职场文书
小学学校评估方案
2014/06/08 职场文书
授权委托书协议书
2014/10/16 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
村官2015年度工作总结
2015/10/14 职场文书
我的收音机情缘
2022/04/05 无线电
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android