javascript之checkbox全选反选功能实现

今天算是明白了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" οnclick="check_all()">全选 
   <input type="checkbox" name='fan' οnclick="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>

原文链接：https://blog.csdn.net/living_ren/article/details/78821856

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《javascript之checkbox全选反选功能实现》