復選框全選、取消全選、反選操作

越來越多的人有了選擇恐懼症，”治療“的最好方式就是全選或全部不選。常用的郵箱每頁可以顯示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; /*將復選框設置為與之前的選擇狀態相反*/
    }
}

掃描二維碼關注微信公眾號：

還望各路大神指點指點，謝謝！