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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
php实现将Session写入数据库
2015/07/26 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
详解Python发送邮件实例
2016/01/10 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
汽车运用工程毕业生自荐信
2013/10/29 职场文书
行政部主管岗位职责
2013/12/28 职场文书
小学班级口号
2014/06/09 职场文书
大学生团日活动总结
2015/05/06 职场文书
客户答谢会致辞
2015/07/30 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python