全选、反选
需求：
- 点击全选按钮，所有按钮选中
- 选中所有按钮，全选按钮选中
- 选中反选按钮，未选中的按钮选中，选中的按钮则相反
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 全选<input id="all" type="checkbox"> 11 <input class="one" type="checkbox" value=""> 12 <input class="one" type="checkbox" value=""> 13 <input class="one" type="checkbox" value=""> 14 <input class="one" type="checkbox" value=""> 15 <input class="one" type="checkbox" value=""> 16 <input class="one" type="checkbox" value=""> 17 反选<input id="pre" type="checkbox" value=""> 18 </body> 19 <script> 20 var all = document.querySelector("#all"); 21 var pre = document.querySelector("#pre"); 22 var one = document.querySelectorAll(".one"); 23 for(let i = 0;i < one.length;i++){ 24 //全选 25 one[i].onclick = function(){ //点击单个按钮 26 all.checked = [...one].every((item)=>{ //如果单个按钮全部选中，则全选按钮选中 27 return item.checked; 28 }) 29 } 30 all.onclick = function(){ //点击全选按钮 31 if(this.checked){ //如果全选按钮选中，则每个按钮选中 32 for (j = 0; j < one.length; j++) { 33 one[j].checked = true; 34 } 35 }else{ 36 for (j = 0; j < one.length; j++) { 37 one[j].checked = false; 38 } 39 } 40 41 } 42 } 43 pre.onclick = ()=>{ //反选 44 for(let i = 0;i<one.length;i++){ 45 if(one[i].checked){ //如果是选中状态，则变成false 46 one[i].checked = false; 47 }else{ 48 one[i].checked = true; 49 } 50 } 51 } 52 </script> 53 </html>
