javaScript原生版购物车：全选 单选 全删 商品数量增减 计算总价 添加商品（代码）

题目：

CSS代码如下：

<style>

*{

margin:0px;

padding:0px;

}

.header,.content,.floot{

width:800px;

margin:0pxauto;

}

.headerulli,.contentulli{

float:left;

list-style:none;

width:100px;

line-height:100px;

text-align:center;

}

/*清除浮动*/

.clear{

clear:both

}

.li2{

width:200px;

}

button{

padding:2px5px;

}

</style>

HTML代码如下：

<divclass="header">

<ul>

<li><inputtype="checkbox"name="quan"οnclick="all2(this)">全选</li>

<liclass='li2'>商品图片</li>

<li>数量</li>

<li>单价</li>

<li>商品名称</li>

<li>小计</li>

<li>操作</li>

</ul>

<divclass='clear'></div>

</div>

<divclass='content'>

<ul>

<li><inputtype="checkbox"name="xuan"οnclick="radio1()"></li>

<liclass='li2'><imgsrc="./img/1.jpg"width="100"></li>

<li>

<buttonοnclick="jian(this)">-</button>

<button>1</button>

<buttonοnclick="add1(this)">+</button>

</li>

<li>￥<span>2200.00</span></li>

<li>数码相机</li>

<li>￥<span>2200.00</span></li>

<li><buttonοnclick="del(this)">删除</button></li>

<divclass='clear'></div>

</ul>

<ul>

<li><inputtype="checkbox"name="xuan"οnclick="radio1()"></li>

<liclass="li2"><imgsrc="./img/2.jpg"width="100"></li>

<li>

<buttonοnclick="jian(this)">-</button>

<button>1</button>

<buttonοnclick="add1(this)">+</button>

</li>

<li>￥<span>2300.00</span></li>

<li>家用相机</li>

<li>￥<span>2300.00</span></li>

<li><buttonοnclick="del(this)">删除</button></li>

<divclass="clear"></div>

</ul>

</div>

<divclass='floot'>

<buttonοnclick="delAll()">全删</button>

<buttonοnclick="addGood()">添加商品</button>

已选商品总计：￥<span>00.00</span>

店铺合计：￥<span>00.00</span>

</div>

JS代码如下：

<script>

//获取操作对象

varheader=document.querySelector('.header')

varcontent=document.querySelector('.content')

varfloot=document.querySelector(".floot")

//获取所有的选中框对象

//varxuans=content.querySelectorAll('[name="xuan"]')

varxuans=document.getElementsByName("xuan")

//全选

functionall2(btn){

//遍历每一个选中框对象

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

//判断全选框是否被选中

if(btn.checked){

xuans[i].checked=true

}else{

xuans[i].checked=false

}

}

totalXuan()

}

//选中框

functionradio1(){

//获取全选框对象

varquan=header.querySelector('[name="quan"]')

vara=0//统计被选中的次数

//遍历所有选中框对象

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

//判断选中框是否被选中

if(xuans[i].checked){

a++

}

}

//判断被选中的次数是否等于选中框的长度

if(a==xuans.length){

quan.checked=true

}else{

quan.checked=false

}

totalXuan()

}

//加法

functionadd1(btn){

//获取数量

varnum=btn.previousElementSibling.innerHTML

//修改数量

num++

//重新把数量赋值给指定位置

btn.previousElementSibling.innerHTML=num

//获取单价

varprice=btn.parentNode.nextElementSibling.lastElementChild.innerHTML

//计算小计

varsum=num*parseFloat(price)

//重新给小计赋值

//btn.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.lastElementChild.innerHTML=sum

btn.parentNode.parentNode.children[5].lastElementChild.innerHTML=sum

totalHe()

totalXuan()

}

//减法

functionjian(btn){

//获取数量

varnum=btn.nextElementSibling.innerHTML

if(num<=1){

num=1

}else{

num--

}

//重新给数量赋值

btn.nextElementSibling.innerHTML=num

//获取单价

varprice=btn.parentNode.nextElementSibling.lastElementChild.innerHTML

//计算小计

varsum=num*parseFloat(price)

//重新给小计赋值

btn.parentNode.parentNode.children[5].lastElementChild.innerHTML=sum

totalHe()

totalXuan()

}

//删除

functiondel(btn){

btn.parentNode.parentNode.remove()

totalHe()

totalXuan()

}

//全删

functiondelAll(){

//遍历每一个选中框对象

for(vari=xuans.length-1;i>=0;i--){

//判断当前选中框是否被选中

if(xuans[i].checked){

//删除当前商品

xuans[i].parentNode.parentNode.remove()

}

}

totalHe()

totalXuan()

}

m=3//图片名称

//添加商品

functionaddGood(){

//创建ul标签

varnewUl=document.createElement('ul')

//给当前新节点添加内容

newUl.innerHTML='<li><inputtype="checkbox"name="xuan"οnclick="radio1()"></li>'

+'<liclass="li2"><imgsrc="./img/'+m+'.jpg"width="100"></li>'

+'<li>'

+'<buttonοnclick="jian(this)">-</button>'

+'<button>1</button>'

+'<buttonοnclick="add1(this)">+</button>'

+'</li>'

+'<li>￥<span>3300.00</span></li>'

+'<li>索尼相机</li>'

+'<li>￥<span>3300.00</span></li>'

+'<li><buttonοnclick="del(this)">删除</button></li>'

+'<divclass="clear"></div>'

//把当前新节点追加到content对象中

content.appendChild(newUl)

m++

if(m>7){

m=1

}

totalHe()

totalXuan()

radio1()

}

//店铺合计

functiontotalHe(){

//获取所有商品

varuls=content.querySelectorAll("ul")

varsum=0//合计

//遍历每一个商品

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

//获取每个商品的小计

varnum=uls[i].children[5].lastElementChild.innerHTML

sum+=parseFloat(num)

}

//给店铺合计赋值

floot.lastElementChild.innerHTML=sum

}

totalHe()

//已选商品总计

functiontotalXuan(){

varsum=0//商品总计

//遍历每一个选中框对象

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

//判断当前选中框是否被选中

if(xuans[i].checked){

//获取当前被选中的商品小计

varnum=xuans[i].parentNode.parentNode.children[5].lastElementChild.innerHTML

sum+=parseFloat(num)

}

}

//给已选商品总计赋值

floot.lastElementChild.previousElementSibling.innerHTML=sum

}

totalXuan()

</script>

<style>*{margin: 0px;padding: 0px;}.header,.content,.floot{width: 800px;margin:0px auto;}.header ul li,.content ul li{float: left;list-style: none;width: 100px;line-height: 100px;text-align: center;}/* 清除浮动 */.clear{clear:both}.li2{width: 200px;}button{padding: 2px 5px;}</style>

<divclass="header"><ul><li><inputtype="checkbox"name="quan"onclick="all2(this)">全选</li><liclass='li2'>商品图片</li><li>数量</li><li>单价</li><li>商品名称</li><li>小计</li><li>操作</li></ul><divclass='clear'></div></div><divclass='content'><ul><li><inputtype="checkbox"name="xuan"onclick="radio1()"></li><liclass='li2'><imgsrc="./img/1.jpg"width="100"></li><li><buttononclick="jian(this)">-</button><button>1</button><buttononclick="add1(this)">+</button></li><li>￥<span>2200.00</span></li><li>数码相机</li><li>￥<span>2200.00</span></li><li><buttononclick="del(this)">删除</button></li><divclass='clear'></div></ul><ul><li><inputtype="checkbox"name="xuan"onclick="radio1()"></li><liclass="li2"><imgsrc="./img/2.jpg"width="100"></li><li><buttononclick="jian(this)">-</button><button>1</button><buttononclick="add1(this)">+</button></li><li>￥<span>2300.00</span></li><li>家用相机</li><li>￥<span>2300.00</span></li><li><buttononclick="del(this)">删除</button></li><divclass="clear"></div></ul></div><divclass='floot'><buttononclick="delAll()">全删</button><buttononclick="addGood()">添加商品</button>已选商品总计：￥<span>00.00</span>店铺合计：￥<span>00.00</span></div>

<script>//获取操作对象var header=document.querySelector('.header')var content=document.querySelector('.content')var floot=document.querySelector(".floot")//获取所有的选中框对象// var xuans=content.querySelectorAll('[name="xuan"]')var xuans=document.getElementsByName("xuan")//全选function all2(btn){//遍历每一个选中框对象for(var i=0;i<xuans.length;i++){//判断全选框是否被选中if(btn.checked){xuans[i].checked=true}else{xuans[i].checked=false}}totalXuan()}//选中框function radio1(){//获取全选框对象var quan=header.querySelector('[name="quan"]')var a=0 //统计被选中的次数//遍历所有选中框对象for(var i=0;i<xuans.length;i++){//判断选中框是否被选中if(xuans[i].checked){a++}}//判断被选中的次数是否等于选中框的长度if(a==xuans.length){quan.checked=true}else{quan.checked=false}totalXuan()}//加法function add1(btn){//获取数量var num=btn.previousElementSibling.innerHTML//修改数量num++//重新把数量赋值给指定位置btn.previousElementSibling.innerHTML=num//获取单价var price=btn.parentNode.nextElementSibling.lastElementChild.innerHTML//计算小计var sum=num*parseFloat(price)//重新给小计赋值// btn.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.lastElementChild.innerHTML=sumbtn.parentNode.parentNode.children[5].lastElementChild.innerHTML=sumtotalHe()totalXuan()}//减法function jian(btn){//获取数量var num=btn.nextElementSibling.innerHTMLif(num<=1){num=1}else{num--}//重新给数量赋值btn.nextElementSibling.innerHTML=num//获取单价var price=btn.parentNode.nextElementSibling.lastElementChild.innerHTML//计算小计var sum=num*parseFloat(price)//重新给小计赋值btn.parentNode.parentNode.children[5].lastElementChild.innerHTML=sumtotalHe()totalXuan()}//删除function del(btn){btn.parentNode.parentNode.remove()totalHe()totalXuan()}//全删function delAll(){//遍历每一个选中框对象for(var i=xuans.length-1;i>=0;i--){//判断当前选中框是否被选中if(xuans[i].checked){//删除当前商品xuans[i].parentNode.parentNode.remove()}}totalHe()totalXuan()}m=3 //图片名称//添加商品function addGood(){//创建ul标签var newUl=document.createElement('ul')//给当前新节点添加内容newUl.innerHTML='<li><input type="checkbox" name="xuan" onclick="radio1()"></li>'+'<li class="li2"><img src="./img/'+m+'.jpg" width="100"></li>'+'<li>'+'<button onclick="jian(this)">-</button>'+' <button>1</button>'+' <button onclick="add1(this)">+</button>'+'</li>'+'<li>￥<span>3300.00</span></li>'+'<li>索尼相机</li>'+'<li>￥<span>3300.00</span></li>'+'<li><button onclick="del(this)">删除</button></li>'+'<div class="clear"></div>'//把当前新节点追加到content对象中content.appendChild(newUl)m++if(m>7){m=1}totalHe()totalXuan()radio1()}//店铺合计function totalHe(){//获取所有商品var uls=content.querySelectorAll("ul")var sum=0//合计//遍历每一个商品for(var i=0;i<uls.length;i++){//获取每个商品的小计var num=uls[i].children[5].lastElementChild.innerHTMLsum+=parseFloat(num)}//给店铺合计赋值floot.lastElementChild.innerHTML=sum}totalHe()//已选商品总计function totalXuan(){var sum=0//商品总计//遍历每一个选中框对象for(var i=0;i<xuans.length;i++){//判断当前选中框是否被选中if(xuans[i].checked){//获取当前被选中的商品小计var num=xuans[i].parentNode.parentNode.children[5].lastElementChild.innerHTMLsum+=parseFloat(num)}}//给已选商品总计赋值floot.lastElementChild.previousElementSibling.innerHTML=sum}totalXuan()</script>