HTML+JS 牛奶购物车功能页面

这是一个很多老师拿来教学的经典案例，参照购物车HTML代码，依次完成购物车的商品全选、增减商品数量、修改商品小计、计算商品总额、删除商品、选中商品添加背景 等功能

car.html

  
  
  
  
  
  
  
  
  



  

    

      

        

          
全选
          
商品
          
单价
          
商品数量
          
小计
          
操作
        
      
      

        

          

            
          
          

            
            
牛奶
          
          
5
          

            

              -
              
              +
            
          
          
5
          

            删除
          
        
        

          

            
          
          

            
            
牛奶
          
          
10
          

            

              -
              
              +
            
          
          
10
          

            删除
          
        
        

          

            
          
          

            
            
牛奶
          
          
20
          

            

              -
              
              +
            
          
          
20
          

            删除
          
        
        

          

            
          
          

            
            
牛奶
          
          
35
          

            

              -
              
              +
            
          
          
35
          

            删除
          
        
      
    
    

      删除所选商品
      清理购物车
      去结算
      

        已经选中0件商品;总价：0
      
    
  

 shop.js

window.onload = function(){
	const btn = document.querySelector(".s_ck_all");
	const buttons = document.querySelectorAll(".s_ck");
	const del = document.querySelector(".del-all");
	var totalPrice = document.getElementById("totalPrice");
	var totalCount = document.getElementById("totalCount");
	var carBody = document.getElementById("carBody");
	var tr = carBody.getElementsByTagName("tr");
	const clear = document.querySelector(".clear");
	
	//第一步 设置全选
	btn.onclick = function(){
			if(btn.checked)
			{
				for(let i in buttons)
				{
					buttons[i].checked = true;
				}
			}
			else{
				for(let i in buttons)
				{
					buttons[i].checked = false;
				}
			}
				getTotal()
		};
		
		//第二步 设置选中删除
		del.onclick = function(){
		let tr = document.querySelectorAll("tr");
		//每次点击时更新tr的的长度，以判断是否全部删除
			for(i in buttons)
			{
				if(tr.length === 1)
				{
					alert("已全部删除");
					return;
				}
				else{
					if(buttons[i].checked === true)
					{
						 console.log( buttons[i])
						 buttons[i].parentNode.parentNode.remove();
						 getTotal()
					}
				}
			}
		};
		

//数量加减、删除
	for(var i=0;i 1){
						input1.value = parseInt(input1.value) - 1;
					}else{
						input1.value = 1;
					}					
				break;
				case 'del':
					carBody.removeChild(target.parentNode.parentNode)
				break;
			}
			getTotal()
		}
	}



//合计、已选商品件数
function getTotal(){
	var carBody = document.getElementById("carBody");
	var tr = carBody.getElementsByTagName("tr");
	var price = 0;
	var count = 0;
	
	for(var i=0;i