当前位置：首页 > news >正文

DOM编程-全选、全不选和反选

news 2025/7/9 9:03:10

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>全选、全不选和反选</title>
   </head>
   <body bgcolor="antiquewhite">
       <script type="text/javascript">
           window.onload = function(){
               //获取所有的爱好
               var aiHaos = document.getElementsByName("aiHao");
               //给全选按钮绑定鼠标单击事件
               document.getElementById("111").onclick = function(){
                   for(var i = 0;i < aiHaos.length;i++){
                       aiHaos[i].checked = true;
                   }
               }
               //给全不选按钮绑定鼠标点击事件
               document.getElementById("222").onclick = function(){
                   for(var i = 0;i < aiHaos.length;i++){
                       aiHaos[i].checked = false;
                   }
               }
               //给反选按钮绑定鼠标点击事件
               document.getElementById("333").onclick = function(){
                   for(var i = 0;i < aiHaos.length;i++){
                       //将当前复选框checked属性的相反值赋值给当前checked属性
                       aiHaos[i].checked = !(aiHaos[i].checked);
                   }
               }
           }
       </script>
       兴趣爱好：
       <input type="checkbox" name="aiHao" value="js" checked="checked"/>javaScript
       <input type="checkbox" name="aiHao" value="java"/>java
       <input type="checkbox" name="aiHao" value="json"/>json
       <input type="checkbox" name="aiHao" value="html"/>html
       <input type="checkbox" name="aiHao" value="css"/>css<br/>
       <input type="button" id="111" value="全都选">
       <input type="button" id="222" value="全不选">
       <input type="button" id="333" value="反向选"><br/>
   </body>
</html>