2、下面的復(fù)選框需要全部選中，上面全選按鈕才是選中狀態(tài)的做法：（下面復(fù)選框的小按鈕有一個(gè)沒被選中，那么全選按鈕也是沒被選中的狀態(tài)）給下面的復(fù)選框綁定點(diǎn)擊事件，每次點(diǎn)擊都要循環(huán)查看下面復(fù)選框是否還有沒被選中的，如果有一個(gè)沒被選中的，上面全選就不選中。

3、可以設(shè)置一個(gè)變量來控制全選按鈕是選中還是沒選中。var flag=true；

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>表單全選+取消全選</title>
? ? <style>
? ? *{
? ? ? ? ? margin:0;padding: 0;
? ? ? }
? ? ? table{
? ? ? ? ? width:500px;
? ? ? ? ? position:relative;
? ? ? ? ? margin:100px auto;
? ? ? ? ? border-collapse:collapse;
? ? ? ? ? border:1px solid #d7d7d7;
? ? ? }
? ? ? thead tr{
? ? ? ? ? background-color:#222;
? ? ? ? ? font-weight: 600;
? ? ? ? ? color:#e9e9e9;
? ? ? }
? ? ? tbody tr:hover{
? ? ? ? ? background: #F5F5F5;
? ? ? }
? ? ? table tr{
? ? ? ? ? text-align: center;
? ? ? ? ? height:30px;
? ? ? }
? ? </style>
</head>
<body>
<table border=1>
? ? <thead>
? ? ? ? <tr>
? ? ? ? ? ? <td><input type="checkbox" id='cekall'></td>
? ? ? ? ? ? <td>商品</td>
? ? ? ? ? ? <td>價(jià)錢</td>
? ? ? ? </tr>
? ? </thead>
? ? <tbody>
? ? ? ? <tr>
? ? ? ? ? ? <td><input type="checkbox" name="" id=""></td>
? ? ? ? ? ? <td>iPhone 11</td>
? ? ? ? ? ? <td>5999.0</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td><input type="checkbox" name="" id=""></td>
? ? ? ? ? ? <td>榮耀20</td>
? ? ? ? ? ? <td>2299.0</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td><input type="checkbox" name="" id=""></td>
? ? ? ? ? ? <td>iPhone XR</td>
? ? ? ? ? ? <td>4499.0</td>
? ? ? ? </tr>
? ? </tbody>
? ? </table>
</body>
<script>

? ? // 1、全選和取消全選做法：讓下面所有復(fù)選框的 checked屬性（選中狀態(tài)）跟隨全選按鈕即可
? ? // 獲取元素，獲取全選按鈕和下面小的復(fù)選框
? ? var cekall = document.getElementById('cekall');
? ? var inp = document.querySelector('tbody').getElementsByTagName('input');
? ? // 注冊(cè)事件
? ? cekall.onclick = function(){
? ? ? ? // this.checked ?可以得到當(dāng)前復(fù)選框的選中狀態(tài)，如果是 true 就是選中，如果是 false 就是未選中
? ? ? ? console.log(this.checked);
? ? ? ? for(var i=0; i< inp.length; i++){
? ? ? ? ? ? inp[i].checked = this.checked;
? ? ? ? }
? ? }
? ? // 2、下面的復(fù)選框要全部選中，上面的全選按鈕才能夠全部選中，給下面的所有復(fù)選框綁定事件，每次點(diǎn)擊，都要循環(huán)查看下面下面所有的復(fù)選框是否有沒選中的，如果有沒選中的復(fù)選框，那么上面的全選按鈕就不選中。
? ? for(var i = 0; i<inp.length; i++){
? ? ? ? inp[i].onclick = function(){
? ? ? ? // 設(shè)置一個(gè)變量來控制按鈕是否全部選中
? ? ? ? var flag = true;
? ? ? ? // 每次點(diǎn)擊下面的復(fù)選框都要檢查下面的四個(gè)小按鈕是否被全部選中。
? ? ? ? for(var i =0; i<inp.length; i++){
? ? ? ? ? ? if(!inp[i].checked){
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? cekall.checked = flag;
? ? ? ? }
? ? }
</script>
</body>
</html>

實(shí)現(xiàn)效果：

點(diǎn)擊全選按鈕