javascript之checkbox全选反选功能实现

来源：互联网发布：电脑同时安装软件编辑：程序博客网时间：2024/05/16 17:50

今天算是明白了checkbox全选反选的实现原理，代码走着：

<!DOCTYPE html>

<html>
<head>
   <meta charset="utf-8">
   <title>checkbox全选反选</title>
</head>
<body>
   <input type="checkbox" name='hobby'>吃放<br>
   <input type="checkbox" name="hobby">睡觉<br>
   <input type="checkbox" name="hobby">上班<br>
   <input type="checkbox" name="hobby">喝茶<br>
   <input type="checkbox" name="hobby">打豆豆<br>
   <input type="checkbox" name="hobby">玩耍<br>
   <input type="checkbox" name="hobby">逗乐<br>
   <input type="checkbox" id="all" onclick="check_all()">全选 
   <input type="checkbox" name='fan' onclick="check_fan()">反选<br>
</body>
   <script type="text/javascript">
       //全选事件调用方法
       function check_all(){
           var all=document.getElementById('all');

           var status=all.checked;

           var hobby=document.getElementsByName('hobby');

           for(var i=0;i<hobby.length;i++){

               hobby[i].checked=status;
           }
       }

       //反选调用
       function check_fan(){
           var hobby=document.getElementsByName('hobby');
           for(var i=0;i<hobby.length;i++){
               if(hobby[i].checked==true){

                   hobby[i].checked=false;

               }else{

                   hobby[i].checked=true;
               }
           }
       }

   </script>
</html>

阅读全文

0 0