前端复选框动态全选：JavaScript实现-优快云博客

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>

   </head>
   <body>

       1<input type="checkbox" name="checkOne"/><br />
       2<input type="checkbox" name="checkOne"/><br />
       3<input type="checkbox" name="checkOne"/><br />
       4<input type="checkbox" name="checkOne"/><br />
       5<input type="checkbox" name="checkOne"/><br />
       6<input type="checkbox" name="checkOne"/><br />
       7<input type="checkbox" name="checkOne"/><br />
       8<input type="checkbox" name="checkOne"/><br />
       9<input type="checkbox" name="checkOne"/><br />
       全选<input id="checkAll" onclick="checkAll()" type="checkbox" name="all" />


       <script>

           function checkAll(){
   var checkAllEle = document.getElementById("checkAll");
   if(checkAllEle.checked==true){
   var checkOnes = document.getElementsByName("checkOne");
   for(var i=0;i<checkOnes.length;i++){
   checkOnes[i].checked=true;
   }
   }else{
   var checkOnes = document.getElementsByName("checkOne");
   for(var i=0;i<checkOnes.length;i++){
   checkOnes[i].checked=false;
   }
   }
   }

       </script>


   </body>
</html>

HTML全选全不选功能