多选框的全选与取消全选

卡卡西最近怎么样

已于 2022-04-27 23:07:34 修改

阅读量2.4k

点赞数 8

分类专栏： JavaScript 零基础入门文章标签： html 前端 javascript 开发语言 css

于 2022-02-20 17:43:39 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/123033073

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 43 订阅

订阅专栏

浏览网页时我们经常能见到全选选项，比如双十一剁手清空购物车时，就会用到一键全选，但是全选与取消全选的思维是什么呢？

思路：我们会利用多选框的 checked 属性来完成，checked 的返回值是一个 Boolean 类型的值，勾选返回 true ，不勾选返回 false。

全选与取消全选的 JS 代码实现：（文章最后有完整代码参考）

qx是获取的全选选项的元素，xz是获取的要选择的所有元素（this.checked 为全选选项是否选择，选择了返回 true ，没有选择则返回 false，并将此结果利用循环赋值给每一个选项）

 var qx=document.getElementById('qx');
 var xz=document.querySelector('tbody').querySelectorAll('input');
qx.onclick=function(){
           for(var i=0;i<xz.length;i++){
               xz[i].checked=this.checked;
           }
       }

单独选项全部选完后全选选项自动勾选的 JS 代码：

先遍历注册事件，然后第二个 for循环的作用为检查是否所有的选项框都选择了，如果没有选择某一个选项，即 ！xz[i].checked ，然后赋值给 flag 为 false，如果全选了则为 true 不变，最后把flag 的值返回给全选框的 checked

 var qx=document.getElementById('qx');
 var xz=document.querySelector('tbody').querySelectorAll('input');
for(var i=0;i<xz.length;i++){
           xz[i].onclick=function(){
               var flag=true;
               for(var i=0;i<xz.length;i++){
                   if(!xz[i].checked){
                     flag=false;
                     break;
                   }
               }
               qx.checked=flag;
           }
       }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
       table{
           margin: 270px auto;
           width: 500px;
           height: 350px;
           border: 1px solid;
           border-spacing: 0;
           font-size: 20px;
           font-weight:500;
       }
       td{
           border: 1px solid;
           padding-left: 10px;
       }

       .qxbox{
           padding:20px 10px;
           background-color: rgb(106, 183, 255);
       }
   </style>
</head>
<body>
    <table>
        <thead>
          <tr> 
             <td class="qxbox"><label 
                ><input type="checkbox" id="qx"> 全选</label></td>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td> <input type="checkbox" id="1"> <label for="1">选项一</label></td>
            </tr>
            <tr>
                <td> <input type="checkbox" id="2"> <label for="2"> 选项二</label></td>
            </tr>
            <tr>
                <td> <input type="checkbox" id="3"> <label for="3">选项三</label> </td>
            </tr>
            <tr>
                <td> <input type="checkbox" id="4"> <label for="4">选项四</label> </td>
            </tr>
        </tbody>
    </table>
    <script>
       var qx=document.getElementById('qx');
       var xz=document.querySelector('tbody').querySelectorAll('input');
       qx.onclick=function(){
           for(var i=0;i<xz.length;i++){
               xz[i].checked=this.checked;
           }
       }
       for(var i=0;i<xz.length;i++){
           xz[i].onclick=function(){
               var flag=true;
               for(var i=0;i<xz.length;i++){
                   if(!xz[i].checked){
                     flag=false;
                     break;
                   }
               }
               qx.checked=flag;
           }
       }
    </script>
</body>
</html>

卡卡西最近怎么样

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
多选框的全选与取消全选

浏览网页时我们经常能见到全选选项，比如双十一剁手清空购物车时，就会用到一键全选，但是全选与取消全选的思维是什么呢？思路：我们会利用多选框的 checked 属性来完成，checked 的返回值是一个 Boolean 类型的值，勾选返回 true ，不勾选返回 false。全选与取消全选的 JS 代码实现：qx是获取的全选选项的元素，xz是获取的要选择的所有元素（this.checked 为全选选项是否选择，选择了返回 true ，没有选择则返回 false，并将此结果利用循环赋值给每一个
复制链接

扫一扫