小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
[代码]复选框全选、反选操作
  • 首页 > 前端
  • 作者:小昱
  • 2017年8月7日 11:38 星期一
  • 浏览:124
  • 字号:
  • 评论:0
  • HTML

        <div class="checkbox-box">
            <ul>    
                <!-- (li>input[value='item$@1' type='checkbox' id='i$@1']+label[for='i$@1']{item$@1})*5 -->
                <li><input type="checkbox" value="item1" id="i1"><label for="i1">item1</label></li>
                <li><input type="checkbox" value="item2" id="i2"><label for="i2">item2</label></li>
                <li><input type="checkbox" value="item3" id="i3"><label for="i3">item3</label></li>
                <li><input type="checkbox" value="item4" id="i4"><label for="i4">item4</label></li>
                <li><input type="checkbox" value="item5" id="i5"><label for="i5">item5</label></li>
            </ul>
            <div class="btnAll">
                <button class="allSelect">全选</button>
                <button class="notAllSelect">全不选</button>
                <button class="reverseSelect">反选</button>
                <button class="selectVal">获取选中的值</button>
            </div>
        </div>

    CSS

        .btnAll button {
            display: inline-block;
            padding: 6px 12px;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-appearance: button;
            cursor: pointer;
            color: #fff;
            background-color: #5bc0de;
            border-color: #46b8da;
        }

    JavaScript - 原生

    var input = document.getElementsByTagName('input');
    console.log(input);
    
    document.querySelector('.allSelect').addEventListener('click', () => {
      console.log('allSelect');
      for (i = 0; i < input.length; i++) {
        input[i].checked = true;
      }
    }, false)
    
    document.querySelector('.notAllSelect').addEventListener('click', () => {
      console.log('notAllSelect');
      for (i = 0; i < input.length; i++) {
        input[i].checked = false;
      }
    }, false)
    
    document.querySelector('.reverseSelect').addEventListener('click', () => {
      console.log('reverseSelect');
      for (i = 0; i < input.length; i++) {
        input[i].checked = !input[i].checked;
      }
    }, false)
    
    document.querySelector('.selectVal').addEventListener('click', () => {
      console.log('selectVal');
      let valStr = ''
      for (i = 0; i < input.length; i++) {
        if (input[i].checked) {
          let val = input[i].value;
          valStr += val + ','
        }
      }
      console.log(valStr);
    }, false)

    JavaScript - jQuery

    // 绑定click事件
    $(document).delegate('.allSelect', 'click', allSelect)
      .delegate('.notAllSelect', 'click', notAllSelect)
      .delegate('.reverseSelect', 'click', reverseSelect)
      .delegate('.selectVal', 'click', selectVal);
    // 全选
    function allSelect() {
      $(".checkbox-list input").prop('checked', true);
    }
    // 全不选
    function notAllSelect() {
      $(".checkbox-list input").prop('checked', false);
    }
    // 反选
    function reverseSelect() {
      $(".checkbox-list input").each(function() {
        $(this).prop('checked', !$(this).prop('checked'));
      })
    }
    // 获取选中的值
    function selectVal() {
      var valArr = '';
      $(".checkbox-list input").each(function() {
        if ($(this).prop('checked')) {
          valArr += $(this).val() + ',';
        };
      })
      console.log(valArr)
    }

    JavaScript - 封装

    class SeletorAll {
      constructor({inps = '', allSelect = '', notAllSelect = '', reverseSelect = '', selectVal = ''}) {
        this.inps = document.querySelectorAll(inps)
        this.allSelectBtn = document.querySelector(allSelect)
        this.notAllSelect = document.querySelector(notAllSelect)
        this.reverseSelectBtn = document.querySelector(reverseSelect)
        this.selectValBtn = document.querySelector(selectVal)
        this.addEventListener()
      }
      addEventListener () {
        this.allSelectBtn.addEventListener('click', () => {
          console.log('allSelect')
          let input = this.inps
          for (let i = 0; i < input.length; i++) {
            input[i].checked = true
          }
        }, false)
    
        this.notAllSelect.addEventListener('click', () => {
          console.log('notAllSelect')
          let input = this.inps
          for (let i = 0; i < input.length; i++) {
            input[i].checked = false
          }
        }, false)
    
        this.reverseSelectBtn.addEventListener('click', () => {
          console.log('reverseSelect')
          let input = this.inps
          for (let i = 0; i < input.length; i++) {
            input[i].checked = !input[i].checked
          }
        }, false)
    
        this.selectValBtn.addEventListener('click', () => {
          console.log('selectVal')
          let input = this.inps
          let valStr = ''
          for (let i = 0; i < input.length; i++) {
            if (input[i].checked) {
              let val = input[i].value
              valStr += val + ','
            }
          }
          console.log(valStr)
        }, false)
      }
    }
    
    let selectorAll = new SeletorAll({
      inps: 'input',
      allSelect: '.allSelect',
      notAllSelect: '.notAllSelect',
      reverseSelect: '.reverseSelect',
      selectVal: '.selectVal'
    })

     

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: [代码]复选框全选、反选操作
    本文地址:http://www.xiaoyulive.top/?post=113
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号