纯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 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
react native 文字轮播的实现示例
Jul 27 Javascript
详解vue高级特性
Jun 09 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
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python验证企业工商注册码
2015/10/25 Python
Python 文件操作的详解及实例
2017/09/18 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
Django框架安装方法图文详解
2019/11/04 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
python sleep和wait对比总结
2021/02/03 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
C#公司笔试题
2014/03/28 面试题
老师的检讨书
2014/02/23 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
2015年司法局工作总结
2015/05/22 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书