【JavaScript練習】表格全選及取消全選功能

阿新 • • 發佈：2021-02-04

【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>