表单的取消和全选

最新推荐文章于 2024-07-24 11:09:48 发布

weixin_45989924

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量45

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45989924/article/details/115734638

版权

JavaScript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

表单的取消和全选

<!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>
</head>
<body>
    <div class=" wrop">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="all_cheack"> 
                      </th>
                      <th>
                        标题1
                    </th>
                    <th>
                        标题1
                    </th>
                </tr>            
            </thead>
            <tbody>
                <tr>
                    <td>  <input type="checkbox" class="a_cheack"> </td>
                    <td>手机2</td>
                    <td>手机3</td>
                </tr>
                <tr>
                    <td>  <input type="checkbox" class="a_cheack"> </td>
                    <td>手机2</td>
                    <td>手机3</td>
                </tr>
                <tr>
                    <td>  <input type="checkbox" class="a_cheack"> </td>
                    <td>手机2</td>
                    <td>手机3</td>
                </tr>
            </tbody>
        </table>
       
    </div>
    
</body>
<script>
    // 1.全选和取消全选的做法：让下面所有复选框的checked的属性（选中状态）都跟随全选按钮
    var inp= document.querySelector("#all_cheack")//全选按钮
    var a_inp=document.querySelector("tbody").querySelectorAll(".a_cheack")//给所有复选框
        inp.onclick=function (params) {//全选按钮注册事件
         for (let index = 0; index < a_inp.length; index++) {
           // console.log(this.checked);它可以得到当前复选框的选中状态，true为选中，false为没选中
            a_inp[index].checked=this.checked
        }
        
    }
    //2.下面复选按钮影响上面的，全选按钮  思路：给下面所有的小按钮绑定点击事件，点击后循环查看是否全部选中
    for (let i = 0; i < a_inp.length; i++) {
        //
       
        // 点击点击下面的复选框都要每次查看下面的小按钮是否都被选中
       a_inp[i].onclick=function () {
        var flag=true//控制全选按钮是否被选中
           for (let i = 0; i < a_inp.length; i++) {
             if( !a_inp[i].checked){//如果是false取反就会变成true，就会进入if执行，就说明有的小复选框没有被选中
              flag=false
              console.log("inp.checked1",flag);
             }
               
           }
           inp.checked=flag//赋值全选按钮
           console.log("inp.checked",inp.checked);
       }

        
    }
</script>
</html>

weixin_45989924

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单的取消和全选

表单的取消和全选<!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"> <tit
复制链接

扫一扫

专栏目录