原生JS——checkbox操作技巧

1. 新增checkbox

全选

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

        

            

                

                    
姓名
                    
年龄
                    
分数
                    

                        
                        全选
                    
                
            
            

                

                    
Tom
                    
12
                    
100
                    

                
                

                    
Andy
                    
12
                    
89
                    

                
                

                    
Candy
                    
11
                    
93
                    

                
            
        
        
    

// 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检查是否包含特定值