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; /*将复选框设置为与之前的选择状态相反*/
        }
    }

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

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

  • 相关阅读:
    dapperHelper
    .NET Core Session的使用方法
    Wpf 关闭当前窗体 打开新窗体
    C#中Split分隔字符串的应用(C#、split、分隔、字符串)
    wpf日期控件
    SQLite数据库数据类型详解
    Asp.Net Core 2.2
    手写图片懒加载
    css动画常用属性总结
    css购物车(抛物线)运动
  • 原文地址:https://www.cnblogs.com/White-Quality/p/5544722.html
Copyright © 2011-2022 走看看