表单全选取消全选

最新推荐文章于 2023-02-02 23:38:47 发布

YuKing_HONG

最新推荐文章于 2023-02-02 23:38:47 发布

阅读量699

点赞数

分类专栏： js 函数 DOM 文章标签： js css checkbox

本文链接：https://blog.csdn.net/YuKing_HONG/article/details/117293487

版权

js 同时被 3 个专栏收录

16 篇文章 3 订阅

订阅专栏

函数

11 篇文章 0 订阅

订阅专栏

DOM

8 篇文章 0 订阅

订阅专栏

1.全选和取消全选做法

让下面所有复选框的checked属性（选中状态）跟随全选按钮即可

2.下面复选框需要全部选中，上面的全选才能选中做法。

给下面所有复选框绑定事点击事件，每次点击，都要循环查看下面所有的复选框是否选中的，如果有一个没有选中的，上面全选就不选中。

<!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>
        /*对表格设置右侧和下部的边框，对单元格设置左侧和上部的边框*/

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table {
            margin: 200px auto;/*居中*/
            font-family: "微软雅黑";
            width: 300px;
            color: rgb(58, 58, 58);
            border-right: 1px solid rgb(180, 180, 180);
            border-bottom: 1px solid rgb(180, 180, 180);

        }

        thead td,thead th {
            font-size: 13px;
            height: 30px;
            color: white;
            border-left: 1px solid white;
            border-top: 1px solid white;
            background-color: rgb(0, 139, 204);
        }

      tbody td {
            height: 30px;
            font-size: 13px;
            border-left: 1px solid rgb(180, 180, 180);
            border-top: 1px solid rgb(180, 180, 180);
            padding-left: 10px;
            background-color: rgb(251, 251, 251);
        }
     
        td:nth-child(1) {  /*让选框居中对齐*/
            width: 30px;
            text-align: center;
            border-left: 1px solid rgb(180, 180, 180);

        }

        input{
            display: block;
            cursor: pointer;
            width: 15px;
            height:15px;
            margin-left: 8px;
        }

       /*修改 input选中后的背景颜色。通过 after 伪类选择器 实现*/
        input[type=checkbox] {
            cursor: pointer;
            position: relative;
            width: 15px;
            height: 15px;
            font-size: 14px;
        }

        input[type=checkbox]::after {
            position: absolute;
            top: 0;
            color: #000;
            width: 15px;
            height: 15px;
            display: inline-block;
            visibility: visible;
            padding-left: 0px;
            text-align: center;
            content: ' ';
            border-radius: 3px
        }

        input[type=checkbox]:checked::after {
            content: "✓";
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            background-color:#a7a7a7;
        }


        .messgae .gouxuan{  /*第一个单元格也就是表单的第一个单元格*/
            padding-left:0;
       }
    </style>
</head>

<body>
    
    <table cellspacing='0' ;cellpadding='0' ;>
        <thead >
            <tr>
                <td class="gouxuan"> <input type="checkbox" id="j_tbAll" ></td>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody class="messgae" id="j_tb">
            <tr>
                <td class="gouxuan"> <input type="checkbox" ></td>
                <td>IPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td class="gouxuan"> <input type="checkbox" ></td>
                <td>IPhone7</td>
                <td>7000</td>
            </tr>
            <tr>
                <td class="gouxuan"> <input type="checkbox" ></td>
                <td>IPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td class="gouxuan"> <input type="checkbox" ></td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>

    <Script>
//全选和不全选的做法
var j_tbAll=document.getElementById('j_tbAll');//全选按钮
var j_tbs=document.getElementById('j_tb').getElementsByTagName('input')//下面的所有选按钮
j_tbAll.onclick=function(){
    //this.checked  它可以得到当前复选框的选中状态如果市true，就是选中，如果是false 就是未选中
    for(var i=0;i<j_tbs.length;i++){
        j_tbs[i].checked=this.checked;
    }
}

for(var i=0;i<j_tbs.length;i++){  //这个循环是给每一个input
   j_tbs[i].onclick=function(){
    var flag=true;
    for(var i=0;i<j_tbs.length;i++){
        if(!j_tbs[i].checked){  //!取反的意思
            flag=false;
            break;
        }
    }
    j_tbAll.checked=flag;
   }
}

    </Script>
</body>

</html>

YuKing_HONG

关注

0
点赞
踩
3

收藏

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

1.全选和取消全选做法让下面所有复选框的checked属性（选中状态）跟随全选按钮即可2.下面复选框需要全部选中，上面的全选才能选中做法。给下面所有复选框绑定事点击事件，每次点击，都要循环查看下面所有的复选框是否选中的，如果有一个没有选中的，上面全选就不选中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e..
复制链接

扫一扫

专栏目录