复选框全选、取消全选、反选操作

越来越多的人有了选择恐惧症，”治疗“的最好方式就是全选或全部不选。常用的邮箱每页可以显示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; /*将复选框设置为与之前的选择状态相反*/
    }
}

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

还望各路大神指点指点，谢谢！