詳解JavaScript實現全選和反選的功能（附代碼示例）

本篇文章給大家介紹原生js是怎么實現全選和反選的功能的，希望對需要的朋友有所幫助！

思路：首先我們獲取節點

		遍歷每個節點 獲取到checked的屬性 		然后我們通過改變checked的屬性改變選中的狀態 		全選的時候我們讓他們都為true  		反選的時候我們使用！達到效果

本次使用到的知識點有：

document.getElementsByName（‘name屬性’）：選中所有的name為name屬性的的元素節點對象 document.getElementById('id名稱'): 通過id名稱獲取一個元素節點對象 onclick:鼠標點擊事件

html部分：

<input id = 'quan' type="checkbox"  value = '全選'> 全選 <input type="checkbox" name="items" value="足球" >足球 <input type="checkbox" name="items" value="籃球" >籃球 <input type="checkbox" name="items" value="羽毛球" >羽毛球 <input id= "fan" type="checkbox"  value="反選">反選

js部分

var items = document.getElementsByName('items'); var quan = document.getElementById('quan'); var fan = document.getElementById('fan');  function fan1(){     var index = 0;     for(var i =0;i<items.length;i++){         items[i].checked = !items[i].checked;         if(items[i].checked==true){             index ++;         }     }     if(index == 3){         quan.checked = true;     }else{         quan.checked =false;     } } quan.onclick=function(){     if(quan.checked ==true){         console.log(items[0].checked);         for(var i = 0;i < items.length;i++){             console.log(items[i].checked);             items[i].checked = true;             fan.checked=false;         }     } else{         for(var i = 0;i < items.length;i++){             // console.log(items[i].checked);             items[i].checked = !true;             fan.checked=false;          }     } }; fan.onclick =function(){     if(fan.checked== true){         fan1()     }else{         fan1()     } }