js购物车 实现全选 反选 删除...(附图片代码)

要求：

1.实现全选和全部选的功能。当商品被选中时，需要计算选择的商品数量和总计

2实现数量的加一或者减一。当数量改变时，需要重新计算小计；如果该商品 被选中，则需要重新计算商品数量和总计。注意：商品数量不能小于 1

3.单击“删除”按钮后，删除列表中的该条数据

css样式

html

js代码

<script>

//删除

functiondel(e){

e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);

}

//复选框

//获取总复选框

varbox=document.getElementById("box");

//获取其他复选框

varxuan=document.getElementsByName("xuan");

functiondian(){

if(box.checked){

for(vari=0;i<xuan.length;i++){

xuan[i].checked=true;

}

}else{

for(vari=0;i<xuan.length;i++){

xuan[i].checked=false;

}

}

zong();

}

//反选

varflag=false;

functionfan(e){

for(vari=0;i<xuan.length;i++){

if(!xuan[i].checked){

flag=false;

break;

}

}

if(!flag){

box.checked=false;

}else{

box.checked=true;

}

zong();

}

//加

//获取

functionjia(e){

varaa=e.nextSibling.nextSibling;

varnum=aa.value;

num++;

aa.value=num;

//获取单价

varprice=e.parentNode.previousSibling.previousSibling.childNodes[0].value;

//获取小计

e.parentNode.nextSibling.nextSibling.childNodes[1].value=price*num;

zong();

}

//减

functionjian(e){

varaa=e.previousSibling.previousSibling;

varnum=aa.value;

num--;

if(num<0){

alert("不要在减了");

num=0;

}

aa.value=num;

//获取单价

varprice=e.parentNode.previousSibling.previousSibling.childNodes[0].value;

//获取小计

e.parentNode.nextSibling.nextSibling.childNodes[1].value=price*num;

zong();

}

//获取总计

varnums=document.getElementById("nums");

//获取总数量

varcount=document.getElementById("count");

//获取所有单价

varprices=document.getElementsByName("price");

//获取所有数量

varshus=document.getElementsByName("shu");

functionzong(){

varsum=0;

varsumqian=0;

for(vari=0;i<xuan.length;i++){

if(xuan[i].checked){

sum+=Number(shus[i].value);

sumqian+=prices[i].value*shus[i].value;

}

}

console.log(sum);

console.log(sumqian);

nums.innerHTML=sum;

count.innerHTML=sumqian;

}

//失去焦点事件

for(vari=0;i<shus.length;i++){

shus[i].οnblur=function(){

zong();

}

}

</script>