複選框全選、取消全選、反選操做

愈來愈多的人有了選擇恐懼症，」治療「的最好方式就是全選或所有不選。經常使用的郵箱每頁能夠顯示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; /*將複選框設置爲與以前的選擇狀態相反*/
    }
}

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

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