javaScript原生版购物车：全选、单选、全删、商品数量增减、计算总价、添加商品（代码）
题目：CSS代码如下：<style>*{margin:0px;padding:0px;}.header,.content,.floot{width:800px;margin:0pxauto;}.headerulli,.contentulli{...
题目：
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代码如下：
<div class="header">
<ul>
<li><input type="checkbox" name="quan" οnclick="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" οnclick="radio1()"></li>
<li class='li2'><img src="./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>
<div class='clear'></div>
</ul>
<ul>
<li><input type="checkbox" name="xuan" οnclick="radio1()"></li>
<li class="li2"><img src="./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>
<div class="clear"></div>
</ul>
</div>
<div class='floot'>
<button οnclick="delAll()">全删</button>
<button οnclick="addGood()">添加商品</button>
已选商品总计：￥<span>00.00</span>
店铺合计：￥<span>00.00</span>
</div>
JS代码如下：
<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=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=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" 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.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>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
20
0- 0
已为社区贡献1条内容
所有评论(0)