原生JS——checkbox操作技巧

1. 新增checkbox

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

2.根据type="checkbox"选中所有checkbox

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

3.修改checkbox选中状态

// 选中
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.一个简单的表格全选框功能实现

// html
<form id="form" action="" method="get" target="targetIfr">
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>分数</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进行遍历，使用for in会访问到队形自定义的properties
2）classList对应的DOMTokenList类型使用contains检查是否包含特定值