您的位置：首页 > Web前端 > JavaScript

javascript之checkbox全选反选功能实现

2017-12-16 20:33 633 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航