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

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

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

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