纯javascript实现选择框的全选与反选功能


Posted in Javascript onApril 08, 2019

HTML部分

<div id="wrap_input_box" >
      <input type="checkbox"><br>
      <input type="checkbox"><br>
      <input type="checkbox"><br>
      <input type="checkbox"><br>
      <input type="checkbox"><br>
      <input type="checkbox"><br>
      <input type="checkbox"><br>
      <input type="checkbox"><br>
      <input type="checkbox"><br>
      <input type="checkbox"><br>
      
   </div>
   <label for="olabel">选择全部 一键上路<input type="checkbox" id= 'all'></label>

js部分

var oinput = document.getElementById('all');
    // var oinput_s = document.getElementsByTagName('input');
     var oinput_s = document.querySelectorAll('#wrap_input_box>input');
    // console.log(oinput_s[6]);
    // 先设置点击全选按钮后 实现所有的选择标签显示选择   取消点击后 取消所有标签选择
    oinput.onclick = function(){
      if (this.checked){
        for (var i =0;i<oinput_s.length;i++){
          oinput_s[i].checked=true;
        }
      }else{
        for (var i =0;i<oinput_s.length;i++){
          oinput_s[i].checked=false;
        }
      }
    }
    // 下面设置的是  每个小标签如果在全选状态下取消选择其中的某一个 对应的按钮的状态会变为没有全选
        // 给每个小选择标签设置绑定点击事件
    for(var j = 0;j<oinput_s.length;j++){
       oinput_s[j].onclick = function (){
          //定义一个标志位 这个标志位 用来判断后面的选择按钮的状态
          var flag = true;
          //遍历每个小选择标签  判断 如果每一个小标签是非选择状态  将标志位改为 false 状态 即对应为未选择
          for (k=0;k<oinput_s.length;k++){
            if(!oinput_s[k].checked){
              flag=false;
              break;
            }
            
          }

          if(flag){
            oinput.checked=true;
          }else{
            oinput.checked=false;
          }
          
       }
    }

总结

以上所述是小编给大家介绍的纯javascript实现选择框的全选与反选功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 #Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 #Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 #Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 #Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 #Javascript
微信小程序实现bindtap等事件传参
Apr 08 #Javascript
详解vue中axios请求的封装
Apr 08 #Javascript
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
python str与repr的区别
2013/03/23 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
图书室标语
2014/06/21 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
英语教师个人总结
2015/02/09 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python