JavaScript基础全选/取消全选

最新推荐文章于 2022-04-21 19:44:24 发布

data belle

最新推荐文章于 2022-04-21 19:44:24 发布

阅读量184

点赞数

分类专栏： JavaScript基础文章标签： js css3 css

本文链接：https://blog.csdn.net/weixin_44944007/article/details/110680286

版权

JavaScript基础专栏收录该内容

8 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 350px;
            height: 230px;
            background-color: blanchedalmond;
        }
        table {
            width: 100%;
            border-collapse:collapse;
        }
        table th, td {
            border: 1px solid black;
            height: 35px;
        }
        table thead tr {
            background-color: aquamarine;
        }
        input {
            width: 16px;
            height: 16px;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="all"></th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>cusihcnsdinc0iwq</td>
                    <td>1000</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>cusihcnsdinc0iwq</td>
                    <td>1000</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>cusihcnsdinc0iwq</td>
                    <td>1000</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>cusihcnsdinc0iwq</td>
                    <td>1000</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>cusihcnsdinc0iwq</td>
                    <td>1000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var all = document.getElementById("all");
        var tb = document.getElementById("tb").getElementsByTagName("input");
        //如果全选按钮被选中，循环遍历tbody的选框，使tbody里面选框的checked属性等于全选框的属性
        all.onclick = function(){
            for(var i=0;i<tb.length;i++){
                tb[i].checked = this.checked;
            }
        }
        // 循环遍历tbody里面的选框，给每个选框绑定注册点击事件，定义flag变量指定全选框checked属性的状态。如果选框被点击一次就会再循环一次tbody里面选框的checked属性，如果全为checked=checked，则flag为true，则全选框被选中；如果有一个选框属性不是checked=checked，则终止循环，flag=false，则全选框不被选中。
        for (var i=0;i<tb.length;i++){
            tb[i].onclick=function(){
                var flag =true;
                for (var i=0;i<tb.length;i++){
                    if(!tb[i].checked){
                        flag = false;
                        break;
                    }
                }
                all.checked = flag;
            }
        }
    </script>
</body>
</html>