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 相关文章推荐
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
小程序实现多选框功能
Oct 30 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
js获取 gif 的帧数的代码实例
Sep 10 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数组的使用方法小结
2010/09/23 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
通过js获取div的background-image属性
2013/10/15 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python fabric使用笔记
2015/05/09 Python
Python中super函数的用法
2017/11/17 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python制作词云的方法
2018/01/03 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python读取文本中的坐标方法
2018/10/14 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
生产部厂长助理职位说明书
2014/03/03 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
安全横幅标语
2014/06/09 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
2016春节慰问信范文
2015/03/25 职场文书
用电申请报告范文
2015/05/18 职场文书
师范生见习自我总结
2015/06/23 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python