【JavaScript练习】表格全选及取消全选功能

最新推荐文章于 2023-04-02 15:32:51 发布

HsiehChia

最新推荐文章于 2023-04-02 15:32:51 发布

阅读量113

点赞数

分类专栏： JavaScript练习文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43303646/article/details/113614232

版权

JavaScript练习专栏收录该内容

40 篇文章 2 订阅

订阅专栏

【JavaScript练习】表格全选及取消全选功能

<!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>
        table {
            border-collapse: collapse;
            margin: 100px auto;
        }
        
        table,
        th,
        td {
            border: 1px solid #bbb;
        }
        
        thead {
            background-color: cornflowerblue;
            text-align: center;
        }
        
        th {
            padding: 5px 20px;
        }
        
        th:nth-child(2) {
            padding: 5px 50px;
        }
        
        tbody {
            background-color: #eee;
            text-align: center;
        }
        
        td {
            padding: 5px 15px;
        }
    </style>
</head>

<body>
    <!-- 表格全选及取消全选 -->
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" name="" id="all">
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>iphone8</td>
                <td>5888</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>ipad Pro</td>
                <td>3200</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>ipad Air</td>
                <td>1888</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>iWatch</td>
                <td>1789</td>
            </tr>
        </tbody>
    </table>
    <script>
        var all = document.getElementById('all');
        var tbs = document.getElementById('tb').getElementsByTagName('input');
        // 点击全选，其他全选中
        all.onclick = function() {
                for (var i = 0; i < tbs.length; i++) {
                    tbs[i].checked = this.checked;
                }
            }
            // 其他全选，全选选中
        for (var i = 0; i < tbs.length; i++) {
            tbs[i].onclick = function() {
                // tag标记全选按钮是否被选中
                var tag = true;
                // 每次点击循环检查4个小按钮是都全被选中
                for (var j = 0; j < tbs.length; j++) {
                    // 若有一个没被选中是真的
                    if (!tbs[j].checked) {
                        // 全选按钮标记为错误
                        tag = false;
                    }
                }
                // 否则全选按钮就是激活的
                all.checked = tag;
            }
        }
    </script>
</body>

</html>

运行结果
在这里插入图片描述

HsiehChia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript练习】表格全选及取消全选功能

【JavaScript练习】表格全选及取消全选功能<!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>
复制链接

扫一扫

专栏目录