转载：Bootstrap之表格checkbox复选框全选-白红宇

转载：Bootstrap之表格checkbox复选框全选

阅读量：6097 次

发布时间：2019-06-20

本文共 3382 字，大约阅读时间需要 11 分钟。

转：http://blog.csdn.net/shangmingchao【商明超的博客】

效果图：

HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了：

版权声明：如需转载，请标明出处：http://blog.csdn.net/shangmingchao【商明超的博客】效果图：HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了：[html] view plain copy
      
                                                      类别编号                        类别名称                        类别组                        状态                        说明                   
             
                                                      C00001                        机车                        机车                        有效                        机车头                   
                                         C00002                        车厢                        机车                        有效                        载客车厢                   
             
        
  重点是JS的实现。复选框很小，不容易点到，所以点击每一行也可以选中该行，并用高亮一些CSS样式表示。点击复选框所在单元格也能选中复选框。下面是完整代码和注释说明：[html] view plain copy                    
                
                
                
                表格          
                
                
                
                
                
                  
                
                              
                    
                         
        
                               列表                  
        
                  
                              
                                   
                                    
                                    
                                
         
                  
        
                  
        
                                                                                                            类别编号                                          类别名称                                          类别组                                          状态                                          说明                                     
                               
                                                                                                            C00001                                          机车                                          机车                                          有效                                          机车头                                     
                                                                             C00002                                          车厢                                          机车                                          有效                                          载客车厢                                     
                               
                          
                  
                              
                                   
                                        
             «  
                              
           1
                              
           2
                              
           3
                              
           4
                              
           5
                              
             »