js实现全选和反选

1、先设计一个简单的全选反选界面

 

 

        

            

                

                
商品
                
价格
            
        
        

            

                

                
小米12
                
￥5000
            
            

                

                
mate30
                
￥5800
            
        
    

 2、实现全选反选功能

核心步骤：

第一步：首行复选框影响到下面的所有复选框       

1、首先需要分别获取到首行的复选框元素，和下面的所有复选框元素。（将首行的复选框和下面的所有复选框分开，分别使用thead和tbody包裹）。

2、因为tobody中的复选框是跟随首行复选框是否选中（全选和反选），所以就将首行的复选框状态赋值给tbody中的复选框即可。       

核心算法：遍历tbody中复选框元素，获取首行复选框状态。

第二步：下面的复选框反向影响首行复选框（当下面的所有复选框都被选中时，首行复选框就被选中，否则就不选中）。

 1、给下面的所有复选框绑定点击事件，每次点击时，都循环查看下面所有的复选框是否有没选中，如果有一个没选中，则最上面第一个全选复选框就不选中。

2、可以通过设置一个变量，来判断变量的值来控制全选是否选中。

实现代码

至此，就通过javascript实现了全选和反选。