JavaScript学习（七）——事件练习

实现全选和全不选的功能

    
    
    
    



    

        

        
编号
        
姓名
        
性别
        
操作
    

    

        

        
1
        
张三
        
男
        
删除 
    
    

        

        
2
        
李四
        
男
        
删除 
    
    

        

        
3
        
王五
        
男
        
删除 
    

1. 给按钮设置点击事件
2. 修改所有复选框的选中状态

首先是全选按钮，获取到节点之后，添加点击事件

var button_sel_all = document.getElementById("select_all");
button_sel_all.onclick = function () {}

根据ClassName忽的checkbox的数组，遍历数组，修改选中状态

var checkboxArr = document.getElementsByClassName("checkbox");
for(i=0;i
       checkboxArr[i].checked = true;
}

全不选按钮一样的做法。

还可以对所有checkbox添加点击事件，记录选中的条数，当条数改变是，修改最上面的checkbox的状态

if(this.checked == true){
    selected_count++;
    changeCheckboxAll()
}
else {
    selected_count--;
    changeCheckboxAll()
}

function changeCheckboxAll() {
        var checkboxAll = document.getElementById("checkboxAll");
        var checkbox = document.getElementsByClassName("checkbox");
        if(selected_count==checkbox.length){
            checkboxAll.checked = true;
        }else {
            checkboxAll.checked = false;
        }
    }

    
    
    



    
    
    
    



    

        

        
编号
        
姓名
        
性别
        
操作
    

    

        

        
1
        
张三
        
男
        
删除 
    
    

        

        
2
        
李四
        
男
        
删除 
    
    

        

        
3
        
王五
        
男
        
删除