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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
JS扩展方法实例分析
Apr 15 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
vue实现分页组件
Jun 16 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
基于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 特殊字符处理函数
2008/09/05 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python3.0 字典key排序
2008/12/24 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
蔻驰英国官网:COACH英国
2020/07/19 全球购物
顶岗实习接收函
2014/01/09 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
2015年实习单位评语
2015/03/25 职场文书
实习报告怎么写
2019/06/20 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis