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>

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

模拟购物车页面全选单选的金额累加
1.前面部分的内容就不过多说明了,就是OkGo请求数据然后封装适配器加入数据源,先上代码先上适配器的代码,注意这里使用的万能适配器,加入依赖 implementation 'com.github.C ...
Jquery全选单选功能
Jquery全选单选功能 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="W ...
全选单选和反选的实现
大家早上好,新的一天又开始咯,继续学习啊,其实最近我发现了一张图特别好玩,如下: 哈哈,就是这张,但是我想说的是,革命尚未成功啊,还得继续修炼啊,好了,闲篇扯到这里,我们今天先来看一下,风靡各大电商网 ...
jquery全选/取消全选(反选)/单选操作
使用jQuery实现一组checkbox全选/取消全选,代码很简洁. jquery版本:2.0 先看看HTML代码,很简单的操作框 </head> <body><div& ...
android 批量查找view,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
HTML复选框的全选、全不选以及单选操作。
今天在进行HTML的table练习的时候,发现一个比较有趣的知识点,有关于复选框的全选.全不选,以及单选操作的相关问题. 待我上网搜索了一下相关资料,发现有关于全选以及全不选的详解还是挺多的,但是复选 ...
android 全选功能,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
vue实现全选单选功能
实现效果待选全选单选多选代码 1.页面结构 2.逻辑代码 3.binggo 就这么愉快的完成了
android 获取通讯录全选反选_Android Recyclerview实现多选,单选,全选,反选,批量删除的功能...
效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
【Javascript】复选框的全选与全不选
$(function () {//全选或全不选$("#all").click(function(){ if(this.checked){ $("#list :checkb ...

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

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

最新文章

热门文章