<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .box { width: 200px; height: 100px; -webkit-transition: all 0.3s ease 0; background-color: #f4f4f4; border: solid 1px transparent; } .box:hover { border: solid 1px #ccc; } </style> </head> <body> <div class="box"> <input name="test" type="checkbox" value="" /> 1 <input name="test" type="checkbox" value="" /> 2 <input name="test" type="checkbox" value="" /> 3 <input name="test" type="checkbox" value="" /> 4 <input name="test" type="checkbox" value="" /> 5</div> <input type="button" value="all" id="all" /> <script> var but = document.getElementById("all"); but.addEventListener("click",change); var isAll = false ; function change (){ var box = document.querySelectorAll(".box input"); var num = getCheckedCheckboxesNum("test"); console.log(num); if(num == box.length){isAll=true;} if(isAll){ for (var i=0;i<box.length;i++){ box[i].checked = false ; isAll = false ;} }else { for (var i=0;i<box.length;i++){ box[i].checked = true ; isAll = true; } } } function getCheckedCheckboxesNum(nameOfCheckBox) { var theNum=0; var theCheckboxInputs=document.getElementsByName(nameOfCheckBox); for (var i=0;i<theCheckboxInputs.length;i++) { if(theCheckboxInputs[i].checked) theNum++; } return theNum; } </script> </body> </html>