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

题目：

CSS代码如下：

<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>

HTML代码如下：

<ul>

</ul>

</div>

<ul>

<li>

</li>

</ul>

<ul>

<li>

</li>

</ul>

</div>

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

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

</div>

JS代码如下：

//获取操作对象

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=sum

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

totalHe()

totalXuan()

}

//减法

function jian(btn){

//获取数量

var num=btn.nextElementSibling.innerHTML

if(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=sum

totalHe()

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" οnclick="radio1()"></li>'

+'<li class="li2"><img src="./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>'

+'<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.innerHTML

sum+=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.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>

<div class="header"><ul><li><input type="checkbox" name="quan" onclick="all2(this)">全选</li><li class='li2'>商品图片</li> <li>数量</li><li>单价</li><li>商品名称</li><li>小计</li><li>操作</li></ul><div class='clear'></div></div><div class='content'><ul><li><input type="checkbox" name="xuan" onclick="radio1()"></li><li class='li2'><img src="./img/1.jpg" width="100"></li> <li><button onclick="jian(this)">-</button><button>1</button><button onclick="add1(this)">+</button></li><li>￥<span>2200.00</span></li><li>数码相机</li><li>￥<span>2200.00</span></li><li><button onclick="del(this)">删除</button></li><div class='clear'></div></ul><ul><li><input type="checkbox" name="xuan" onclick="radio1()"></li><li class="li2"><img src="./img/2.jpg" width="100"></li> <li><button onclick="jian(this)">-</button><button>1</button><button onclick="add1(this)">+</button></li><li>￥<span>2300.00</span></li><li>家用相机</li><li>￥<span>2300.00</span></li><li><button onclick="del(this)">删除</button></li><div class="clear"></div></ul></div><div class='floot'><button onclick="delAll()">全删</button><button onclick="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>