javascript之checkbox全选反选功能实现

最新推荐文章于 2023-06-04 23:04:18 发布

living_ren

最新推荐文章于 2023-06-04 23:04:18 发布

阅读量236

点赞数

分类专栏：小程序

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

版权

小程序专栏收录该内容

125 篇文章 1 订阅

订阅专栏

今天算是明白了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>

living_ren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之checkbox全选反选功能实现

今天算是明白了checkbox全选反选的实现原理，代码走着： checkbox全选反选吃放睡觉上班喝茶打豆豆玩耍逗乐全选  反选 //全选事件调用方法 function check_al
复制链接

扫一扫