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 .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
javascript new一个对象的实质
Jan 07 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
纯JS实现简单的日历
Jun 26 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
全面解析JavaScript Module模式
Jul 24 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中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php生成shtml类用法实例
2014/12/09 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python实现的双色球生成功能示例
2017/12/18 Python
5款非常棒的Python工具
2018/01/05 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python实现大转盘抽奖效果
2019/01/22 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
企业总经理任命书
2014/06/05 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript