JavaScript基础学习 表单全选取消全选效果实现

    
    
    
    Document
    
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    





    
        
            
                
                名称
                最新公布值
                累计净值
                前单位净值
                净值增长率
            
        
        
            
                
                农银金穗3个月定期开放债券
                1.007
                1.009
                1.200
                0.800
            
            
                
                农银金穗3个月定期开放债券
                1.007
                1.009
                1.200
                0.800
            
            
                
                农银金穗3个月定期开放债券
                1.007
                1.009
                1.200
                0.800
            
            
                
                农银金穗3个月定期开放债券
                1.007
                1.009
                1.200
                0.800
            
        
    
    
        var thea = document.getElementById('th_c');
        var tbod = document.getElementById('tbody').getElementsByTagName('input');
        // 获取头部的复选框
        thea.onclick = function() {
            for (var i = 0; i < tbod.length; i++) {
                // 利用循环控制四个小复选框的选中情况，如果头部的被选中，则小复选框也都被选中
                tbod[i].checked = this.checked;
            }
            console.log(this.checked);
        }

        //  获取四个小复选框
        for (var i = 0; i < tbod.length; i++) {
            tbod[i].onclick = function() {
                var flag = true;
                // 检查四个小复选框是否都被选中，都被选中则头部的复选框也被选中，有一个没被选中则头部复选框不被选中
                for (var i = 0; i < tbod.length; i++) {
                    if (!tbod[i].checked) {
                        flag = false;
                        break;
                    }
                }
                thea.checked = flag;

            }
        }