【JavaScript】計數器+classList使用-純js案例:全選反選
阿新 • • 發佈:2017-11-26
nta ava count 改變 markdown 精簡 javascrip 案例 標簽
這兩天做了一個全選反選的案例,用了幾種方法,剛開始寫的磕磕絆絆,聽老師講解後理清思路,再來寫就很容易了。其實還是寫代碼時候的思路問題。首先要分析功能,然後分步實現,不要攪在一起。下面幾種方法為比較精簡的方法,用到classList屬性,剛開始寫的兩個方法都比較原始,所以相對比較復雜,就不放上來了。
案例的功能:
1、每個列表項li都能點擊切換選中和未選中狀態;
2、全選框能點擊切換選中和未選中狀態,點擊選中時,所有列表項li都選中,點擊未選中時,所有列表項都為未選中,只要有一個列表項li未選中,全選框切換為未選中狀態;
3、反選,點擊反選就切換列表項li的狀態;
classList
var a.className = "a h g m"; IE8以下不兼容 節點.classList 類數組,節點所有類名的集合 ["a","h","g","m"] a.classList.remove("a","h");//移除a和h .add() 新增類名 .remove() 移除類名 .toggle() 切換類名(有就加,沒有就減) .contains() 判斷是否包含某個類名
var Oul = document.getElementById("ul"); var Ali = Oul.getElementsByTagName("li"); var Oall = document.getElementById("all"); var Oreverse = document.getElementById("reverse"); Length = Ali.length; //為每個li添加點擊事件 for(var i=0; i<Length; i++){ Ali[i].onclick = function(){ this.classList.toggle("checked"); //判斷li是否全部被選中 var full = true; for(var j=0; j<Length; j++){ //若有未選中的li if(!Ali[j].classList.contains('checked')){ full = false; break; } } //修改全選框狀態 Oall.classList[full ? "add":"remove"]("on"); } } //為全選添加點擊事件 Oall.onclick = function(){ //獲取全選框狀態 var bool = this.classList.contains('on'); //根據狀態判斷是選中還是清除 for(var i=0; i<Length; i++){ Ali[i].classList[bool ? "remove":"add"]("checked"); } //改變全選框狀態 this.classList.toggle("on"); } //為反選添加點擊事件 Oreverse.onclick = function(){ //每個li取反 for(var i=0; i<Length; i++){ Ali[i].classList.toggle("checked"); } //判斷li是否全部被選中 var full = true; for(var j=0; j<Length; j++){ //若有未選中的li if(!Ali[j].classList.contains('checked')){ full = false; break; } } //修改全選框狀態 Oall.classList[full ? "add":"remove"]("on"); }
計數器
var Oul = document.getElementById("ul"); var Oli = document.getElementsByTagName("li"); var Length = Oli.length; var Oall = document.getElementById("all"); var Oback = document.getElementById("reverse"); var count = 0; //當前選中數 //為每個li添加點擊事件 for(var i = 0; i< Length; i++){ Oli[i].onclick = function(){ var non = this.classList; /*if(non.contains('checked')){ non.remove("checked"); count--; }else{ non.add("checked"); count++; }*/ //判斷當前點擊li是去掉勾 還是 加上勾,從而對應的變化計數器 non.contains('checked') ? count--:count++; //改變點擊的li狀態 non.toggle("checked"); //判斷是否全選,改變全選框狀態 Oall.classList[count === Length ? "add":"remove"]("on"); } } //為全選添加點擊事件 Oall.onclick = function(){ var bool;//判斷當前全選狀態,修改計數器的值 if(this.classList.contains('on')){ bool = false; count = 0; }else{ bool = true; count = Length; } for(var i =0; i<Length; i++){ Oli[i].classList[bool ? "add":"remove"]("checked"); } //改變全選框狀態 this.classList.toggle("on"); } //為反選添加點擊事件 Oback.onclick = function(){ //修改計數器的值 count = Length - count; for(var i = 0 ; i<Length; i++){ Oli[i].classList.toggle("checked"); } //判斷是否全選,改變全選框狀態 Oall.classList[count === Length ? "add":"remove"]("on"); }
checkbox
單選框和復選框,他們個人的選中狀態,在js裏面呈現是以布爾值方式呈現的
- 選框節點.checked 得到一個布爾值
- 選框節點.checked = true; 將選框變成被選中狀態
- 選框節點.checked = false; 將選框變成不被選中狀態
通過js這樣操作的checked屬性,不會影響節點的標簽屬性
【JavaScript】計數器+classList使用-純js案例:全選反選