jQuery监听 全选checkbox

jQuery监听 全选checkbox

实现原理

1. 通过jQuery监听，监听指定结构下的元素单击事件。

   $('div label input:checkbox').on('click', function() {..})

    

2. 接收到监听事件后，保存单击的全选/全不选状态。

   var that = this

    

3. 通过jQuery选择器，选择同组的checkbox

   var parents = $(this).parents('.whiteboard')[0];
   $(parents).find('div>label>input:checkbox');

    

4. 对同组所有checkbox赋值

   this.checked = that.checked;

   ---

    

DOM

    
基本信息
        
            
             全选 
        
    
    

        

            
                
                 姓名 
            
        
        

            
                
                 身份证号码 
            
        
        

            
                
                 户籍所在地 
            
        
        

            
                
                 户籍所在街道 
            
        
        

            
                
                 联系方式 
            
        
        

            
                
                 监护人 
            
        
    


    
评估信息
        
            
             全选 
        
    
    

        

            
                
                 评估日期 
            
        
        

            
                
                 评估等级 
            
        
        

            
                
                 经济状况 
            
        
        

            
                
                 享受服务类型 
            
        
    

 

JS

$('div label input:checkbox[name="selectAll"]').on('click', function() {
    var that = this;
    var parents = $(this).parents('.whiteboard')[0];
    $(parents).find('div>label>input:checkbox').each(function(){
        this.checked = that.checked;
    })
})；

 

参考

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

http://www.w3school.com.cn/jquery/jquery_selectors.asp

http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

https://www.cnblogs.com/liaojie970/p/6386646.html