表单全选/取消全选案例 html+css+js

最新推荐文章于 2023-02-06 14:26:13 发布

蛋卷cook

最新推荐文章于 2023-02-06 14:26:13 发布

阅读量836

点赞数 2

分类专栏： html+css+js案例文章标签： javascript html html5 css3

本文链接：https://blog.csdn.net/Cloudyunduo/article/details/113046772

版权

html+css+js案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表单全选/取消全选案例
要求：
1.选中全选按钮，下面按钮全部选中，取消全选按钮，下面按钮全部取消选中
2.下面按钮全部选中，全选按钮才选中，只有有一个按钮没有选中，就不选中全选按钮

<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    table {
        border-collapse: collapse;
        margin: 0 auto;
    }
    
    table td {
        border: #ccc solid 2px;
    }
    
    thead {
        background-color: pink;
        /* font-size: 20px; */
        text-align: center;
    }
</style>

<body>
    <table>
        <thead>
            <tr>
                <td><input class="td" type="checkbox"></td>
                <td>商品</td>
                <td>价钱</td>
            </tr>
        </thead>
        <tbody class="tbody">
            <tr>
                <td><input type="checkbox"></td>
                <td>iphon8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>ipad pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>ipad pro</td>
                <td>2000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>apple watch</td>
                <td>2000</td>
            </tr>
        </tbody>

    </table>
</body>

<script>
    //表单全选/取消全选
    var td = document.querySelector('thead').querySelector('.td');
    var tds = document.querySelector('.tbody').querySelectorAll('input');
    td.onclick = function() {
        for (var i = 0; i < tds.length; i++) {
            tds[i].checked = this.checked;
        }
    }
    for (var i = 0; i < tds.length; i++) {
        tds[i].onclick = function() { //所有商品按钮的事件
            var flag = true //创建一个变量存储布尔值（checked=true 选中 checked=false不选中）
            for (var i = 0; i < tds.length; i++) { //循环所有小按钮看看是否有一个不选，如果有一个不选中就不选中全选按钮
                if (!tds[i].checked) {
                    flag = false; //有一个不全选中，将变量变为false；
                    break; //直接退出，接下来的没必要在循环了
                }
            }
            td.checked = flag //如果全选了 那么flag=true 把它赋值给全选按钮 则全选按钮也选中
        }
    }
</script>