总结的常用的前端开发中的常见套路之购物车页面

1.商品的全选和全不选  

  1. 获取页面中全选框所在的input,绑定其变change事件
  2. 获取全选框的状态
  3. 遍历获取商品对应的CheckBox,设置其选中状态和全选的保持一致
  4. 同时,当全选框状态发生变化时,结算中商品的总价格和总数目相应的需要改变。就需要计算页面中被选中的商品的总价格和总数目。
  5. 计算总价格和总数目,需要获取选中的商品的数目和小计,进行类加计算商品的总数目和总价格就,这里可以单独定义一个函数,以便后面复用
  6. 最后,需要设置被选中的商品的总数目和价格

  先贴上计算总件数和总价格的代码(说明:页面中出现的中括号,那个是django的模板注释,不过不影响前端代码。)

 


2.商品的全选和全不选代码


                    
                    

你可能感兴趣的:(前端)