js实现全选和反选

最新推荐文章于 2022-09-10 10:02:58 发布

快起来搬砖了

最新推荐文章于 2022-09-10 10:02:58 发布

阅读量182

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_44590591/article/details/107310980

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <input type="checkbox" id="Selectall" />全选
       <button id="Counter">反选</button>
       <input type="checkbox" class="Single" />单选1
       <input type="checkbox" class="Single" />单选2
       <input type="checkbox" class="Single" />单选3
       <script>
           var checkbox = document.getElementsByClassName('Single')
           var Selectall = document.getElementById('Selectall')
           var checkOther = document.getElementById('Counter')
           Selectall.onclick = function() {
               var flag = true
               for (var i = 0; i < checkbox.length; i++) {
                   if (!checkbox[i].checked) flag = false
               }
               if (flag) {
                   for (var i = 0; i < checkbox.length; i++) {
                       checkbox[i].checked = false
                   }
               } else {
                   for (var i = 0; i < checkbox.length; i++) {
                       checkbox[i].checked = true
                   }
               }
           }
           checkOther.onclick = function() {
               for (var i = 0; i < checkbox.length; i++) {
                   checkbox[i].checked = !checkbox[i].checked
               }
           }
       </script>
   </body>
</html>

快起来搬砖了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现全选和反选

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="checkbox" id="Selectall" />全选 <button id="Counter">反选&l...
复制链接

扫一扫