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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 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
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python 转义字符详细介绍
2017/03/21 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python使用knn实现特征向量分类
2018/12/26 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
工商管理专业自荐信
2014/06/03 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
小学六一主持词开场白
2015/05/28 职场文书
喋血孤城观后感
2015/06/08 职场文书
小学语文国培研修日志
2015/11/13 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书