1. 新增checkbox

<input type="checkbox" id="allCheck" class="check" value="all">
<lable for="allCheck">全選</lable>

2.根據(jù)type="checkbox"選中所有checkbox

const checkList = document.querySelectorAll('input[type="checkbox"]');

3.修改checkbox選中狀態(tài)

// 選中
document.querySelector('input[type="checkbox"]').checked = true;
// 取消選中
document.querySelector('input[type="checkbox"]').checked = false;

4.獲取checkbox的value

const curValue = document.querySelector('input[type="checkbox"]').value;

5.一個(gè)簡(jiǎn)單的表格全選框功能實(shí)現(xiàn)

// html
<form id="form" action="" method="get" target="targetIfr">
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年齡</th>
                    <th>分?jǐn)?shù)</th>
                    <th>
                        <input type="checkbox" id="allCheck" class="check" value="all">
                        <lable for="allCheck">全選</lable>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tom</td>
                    <td>12</td>
                    <td>100</td>
                    <td><input type="checkbox" class="check checkChild" value="Tom" name="name"></td>
                </tr>
                <tr>
                    <td>Andy</td>
                    <td>12</td>
                    <td>89</td>
                    <td><input type="checkbox" class="check checkChild" value="Tom" name="name"></td>
                </tr>
                <tr>
                    <td>Candy</td>
                    <td>11</td>
                    <td>93</td>
                    <td><input type="checkbox" class="check checkChild" value="Tom" name="name"></td>
                </tr>
            </tbody>
        </table>
        <input type="submit" value="提交">
    </form>

// js
let allChecked = false;
    const allCheckBtn = document.getElementById("allCheck");
    allCheckBtn.onclick = function() {
        // const checkList = document.getElementsByClassName('check');
        const checkList = document.querySelectorAll('input[type="checkbox"]');
        for (let check of checkList) {
            check.checked = !allChecked;
        }
        allChecked = !allChecked;
    }

    const form = document.getElementById("form");
    form.addEventListener('click', function(e){

       if(e.target.classList.contains('checkChild')) {
        console.log(e.target.classList)
            const checkChildList = document.getElementsByClassName('checkChild');
            const allCheckChildNum = checkChildList.length;
            let checkedNum = 0;
            for(let checkChild of checkChildList) {
                if (checkChild.checked) {
                    console.log(checkChild.value);
                    checkedNum++;
                }
            }
            if (checkedNum === allCheckChildNum) {
                allCheckBtn.checked = true;
                allChecked = true;
            } 
            else {
                allCheckBtn.checked = false;
                allChecked = false;
            }
                
       }
    }, false);

注：
1）通過document.querySelectorAll()獲得的NodeList類型，要使用for of進(jìn)行遍歷，使用for in會(huì)訪問到隊(duì)形自定義的properties
2）classList對(duì)應(yīng)的DOMTokenList類型使用contains檢查是否包含特定值