全选反选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function() { //拿到全部水果 var Allsg = document.getElementsByName("sg"); //拿到全选按钮 var BtnA = document.getElementsByName("All")[0]; for (let i = 0; i < Allsg.length; i++) { if(Allsg[i].checked === true){ BtnA.checked = true; } } BtnA.onclick = function() { for (let i = 0; i < Allsg.length; i++) { Allsg[i].checked = true; } } document.getElementsByName("noAll")[0].onclick = function() { for (let i = 0; i < Allsg.length; i++) { Allsg[i].checked = false; BtnA.checked = false; } } var resBtn = document.getElementsByName("noresAll")[0]; resBtn.onclick = function(){ //拿到当前的所有水果 for (let i = 0; i < Allsg.length; i++) { console.log(Allsg[i].checked); if(Allsg[i].checked === true){ Allsg[i].checked = false; }else{ Allsg[i].checked = true; } } } } </script> </head> <body> 苹果:<input type="checkbox" name="sg" value="苹果"> 香蕉:<input type="checkbox" name="sg" value="香蕉"> 梨子:<input type="checkbox" name="sg" value="梨子"> <br> 全选:<input type="checkbox" name="All"> <br> 全不选:<input type="checkbox" name="noAll"> <br> 反选:<input type="checkbox" name="noresAll"> </body> </html>