zoukankan      html  css  js  c++  java
  • 复选框全选、取消全选、反选操作

    越来越多的人有了选择恐惧症,”治疗“的最好方式就是全选或全部不选。常用的邮箱每页可以显示20封邮件,如果要删除全部邮件,一个一个的选择然后删除有点太繁琐了。为了减低操作成本,提升用户体验,所有邮箱提供了一个全选的功能。
    本例要实现三个简单的操作:
    全选、取消全选、反选
    思路: 
    通过控制复选框的属性checked可以设置复选框的选中状态。
    全选:就是将所有复选框的checked设置为true
    全选
    取消全选:就是将所有复选框的checked设置为false
    取消全选
    反选:就是将所有选中的复选框设置为false,未选中的设置为true就OK啦
    反选
    接下来代码实现:
    代码其实很简单,根据上述思路改变checkbox的属性checked的值就行了。
    HTML:
    <input type="checkbox" name="sport">篮球<br/>
    <input type="checkbox" name="sport">足球<br/>
    <input type="checkbox" name="sport">羽毛球<br/>
    <input type="checkbox" name="sport">乒乓球<br/>
    <input type="checkbox" name="sport">网球<br/>
    <div>
        <span id="allSelect">全选/取消全选</span>
        <span id="revSelect">反选</span>
    </div>

    javaScript:

    全选/反选操作:

    /*全选/取消全选*/
    allSelect.onclick = function(){
        if(len == oSports.length){ /*当复选框都被选中的时候进行取消操作*/
            for(var i = 0;i < oSports.length;i++){
                oSports[i].checked = false; /*将复选框的checked属性设置为false就取消选择了*/
                len = 0;
            }
        }else{
            for(var i = 0;i < oSports.length;i++){
                    oSports[i].checked = true; /*将复选框的checked属性设置为true*/
                len++;    
            }
        }
    }

    反选操作:

    /*反选*/
    revSelect.onclick = function(){
        for(var i = 0;i < oSports.length;i++){
            oSports[i].checked = !oSports[i].checked; /*将复选框设置为与之前的选择状态相反*/
        }
    }

    扫描二维码关注微信公众号:

    还望各路大神指点指点,谢谢!

  • 相关阅读:
    cookie设置不能马上返回?
    Firemonkey的旁门左道[八]
    小智慧38
    避免15个浪费时间的坏习惯
    Deep Learning论文笔记之(七)深度网络高层特征可视化
    hdu1024 最大m子序列和
    poj 2472
    poj 2472
    hdu4539 郑厂长系列故事——排兵布阵 + POJ1158 炮兵阵地
    hdu4539 郑厂长系列故事——排兵布阵 + POJ1158 炮兵阵地
  • 原文地址:https://www.cnblogs.com/White-Quality/p/5544722.html
Copyright © 2011-2022 走看看