全選與反選在表單類的項目中還是很常見的，電商項目中的購物車一定少不了這個功能。

下面我只就用一個簡單的案例做個演示吧。

<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll"/>
            </th>
            <th>商品</th>
            <
 
th>價格</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>小米手機</td>
            <td>2000</td>
        </tr>
        <
 
tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>ThinkPad</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
 

            <td>iPhone7</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>iPhoneX</td>
            <td>9000</td>
        </tr>
        </tbody>
    </table>

上面是是HTML部分代碼，做了一個表格。

下面是css代碼：

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

下面是js代碼，實現全選反選功能。

<script>
    var all = document.getElementById("j_cbAll");
    var tbody = document.getElementById("j_tb");
    var checkboxes = tbody.getElementsByTagName("input");//下面的單選框
    //點擊all 讓下面的的選中狀態和all一致
    all.onclick = function () {
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = all.checked;
        }
    };

    //讓下面的影響上面
    //點擊每一個都判斷 如果每一個都選中了 all就選中 否則不選中
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].onclick = function () {
            var isCheckedAll = true;
            for (var i = 0; i < checkboxes.length; i++) {
                if (!checkboxes[i].checked) {
                    isCheckedAll = false;
                    break;
                }
            }
            all.checked = isCheckedAll;
        };
    }


</script>

上面就是這個案例的效果了。

當然，這個還可以擴展一下，做成一個購物車的案例。

DOM操作案例之--全選與反選