效果图废话不多直接上代码
用的avalon渲染，其实都是一样的
<div class="shop-arithmetic">
<a href="javascript:;" class="minus" onclick="delpubls(this)">-</a>
<input type="number" style="min-height: 20px;font-size: -2.2rem" ms-attr-carid="el.cart_id" ms-attr-price="el.min_price" class="num" ms-attr-value="{{el.buy_num}}"/>
<a href="javascript:;" class="plus" onclick="addpubls(this)">+</a>
</div>
function addpubls(now){
var previousnode = now.previousElementSibling;
var a = parseInt(previousnode.value)
a += 1;
previousnode.value = a;
setcheckallprice()
}
function delpubls(now){
var nextnode = now.nextElementSibling;//获取下一个节点
var a = parseInt(nextnode.value);
a -= 1;
a = a > 0 ? a : 0;
nextnode.value = a;
setcheckallprice()
}
上面是购物车加减，
这是效果图，要做到点击下方全选都选中取消，
点击商品，相应的选中取消，
点击单个，选中取消
//某一种商品全部选中
function onegoodsallcheck(now){ var aaa = now.parentNode.parentNode.getElementsByClassName('goodsCheck');
if(now.checked){
for(i=0;i<aaa.length;i++){
// aaa[i].checked = 'checked';
aaa[i].setAttribute('checked','checked');
aaa[i].checked = true;
if (i!=0) {
var bbb = aaa[i].parentNode.getElementsByClassName('num');
// alert('')
bbb[0].className = "num mychecknum";
};
}
// $('.checkallnum').text($('.num').length);
}else{
for(i=0;i<aaa.length;i++){
// aaa[i].checked = false;
aaa[i].removeAttribute('checked');
aaa[i].checked = false;
if (i!=0) {
var bbb = aaa[i].parentNode.getElementsByClassName('num');
bbb[0].className = "num";
};
}
}
setcheckallnum();
}
//获取当前被选中的数量 给下方赋值
function setcheckallnum(){
var aaa = document.getElementsByClassName('num mychecknum');
var checkallnum = document.getElementsByClassName('checkallnum');
for (var i = checkallnum.length - 1; i >= 0; i--) {
checkallnum[i].innerText = aaa.length;
};
setcheckallprice();
}
//获取当前所有价格，给下方赋值
function setcheckallprice(){
// checkallprice
var aaa = document.getElementsByClassName('num mychecknum');
if (aaa.length==0) {
var ccc = document.getElementsByClassName('checkallprice');
ccc[0].innerText = '0.00';
return false;
};
//算出选择的总价
var allprice = 0;
for (var i = aaa.length - 1; i >= 0; i--) {
var nowprice = aaa[i].getAttribute('price');
var nownum = aaa[i].value;
allprice = allprice+(nowprice*nownum);
};
var ccc = document.getElementsByClassName('checkallprice');
ccc[0].innerText = allprice; } //单选的按钮
function xuanonecheck(now){
var aaa = now.parentNode.getElementsByClassName('num');
// alert(aaa.length);
// return false;
if(now.checked){
//取消
now.setAttribute('checked','checked');
//设置后面input为选中、
aaa[0].className = "num mychecknum";
}else{
// 默认
now.removeAttribute('checked');
aaa[0].className = "num";
}
setcheckallnum();
}
因为很多地方不能用jquery，所以这里用了jquery和原生js
他们和html的checked交互不同，需要看一下，不然会出现bug，解决办法上面已经有了
贴一下全部代码，是微信端采用avalon，public.js，common.css，apicloud.等等
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/module.css">
<script src="js/shopping.js"></script>
<style>
#dandu{
-moz-opacity:0.2;
/*position:absolute;top:0;left:0;z-index:99;*/
opacity:0.6;
width:100%;background-color:#000;
filter: alpha(opacity=30);
position:absolute;top:0;left:0;z-index:99;
width:100%;height:100%;
}
.sel .dr {
/*position: absolute;*/
/*right: 0;*/
/*margin-right: 5px*/
}
.shop-arithmetic{
min-width: 80px;
margin-right: 0px;
}
</style>
<style>
*{
margin:0;
padding:0;
}
.clear{
content: '';
clear:both;
overflow: hidden;
}
.clear:after{
zoom:1;
}
.box{
width:404px;
margin:0 auto;
height: 50px; }
.box .btn{
display: inline-block;
width:50px;
height:50px;
line-height:50px;
/*border:1px solid #000;*/
cursor:pointer;
}
.box .btn-left{
float: left;
padding-left: 11px;
}
}
.box .btn-right{
float: right;
}
.box .bar{
width:300px;
height:52px;
float: left;
position:relative;
overflow: hidden;
}
.box .bar ul{
width:auto;
list-style: none;
position:absolute;
left:0;
top:0;
height: 55px;
}
.box .bar li{
width:100px;
text-align:center;
float:left;
line-height:50px;
height:50px;
}
.licheck{
border-bottom: solid 6px red !important;
} #bar{ color: black;
background:white;
}
</style>
<style>
body{font-family: "微软雅黑";
} .message1{
width: 100%;
height: 150px;
position: absolute;
padding-top:23px;
background-color: #FFFFFF; } .message1 .zuo{
width: 35%;
height: 103px; margin-left: 0px;
position: absolute;
right: 0; } .message1 .zuo img{
width: 111px;
height: 84px;
padding-left: 7px; }
.message1 .you{ width: 70%;
height: 103px;
padding-left:24px;
margin-right: 0px;
position: absolute;
left:0; }
.message1 .you p{
line-height: 28px;
} .lanren{width: 100%; background-color: #777777; height: 3px;}
#bar{ display: block;background:red; float: left; height: 46px;text-align: center; color: #FFF;} .bullet1{
max-height: 210px;
}
.shop-price{
height: 25px !important;
}
.shop-arithmetic{
width: 80px !important;
} </style>
<div ms-controller='buy_index10' scrollEnable:false>
<div class="wrap">
<div id="head" class="pr tc bgcf02828" style="top:0;z-index:999;position:fixed;height:50px; position: fixed;width: 100%;">
<div class="headbox h49 lh49">
<img class="pa left10 top15 h18 cp zi2" src="data:images/back1.png" onclick="back();" />
<span class="f20" style="color:#FFF0F5">进货单</span>
<span onclick="bianjitop()" class="dib cfff pa right10 top16 h18 cp zi2 lh18 f16 bianji">编辑</span>
<span onclick="bianjitop()" class="dib cfff pa right10 top16 h18 cp zi2 lh18 f16 wancheng" style="display: none">完成</span>
</div>
<div class="bbhhd"></div>
</div> <div style="overflow-y: auto;height:100%;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;"> <!--头部结束-->
<div class="shopping mt50 mb70" style="" >
<div ms-repeat="carlist">
<div class="shop-info" style="background-color: white;width: 100%">
<input type="checkbox" name='checkbox' class="check goods-check goodsCheck onegoodsallcheck" onclick="onegoodsallcheck(this)">
<div class="shop-info-img"><a href="#"><!-- <img src="data:images/buy/2.png" /> --><img onerror="this.onerror=null; this.src='images/buy/2.png'" ms-src="{{el.attr_image}}" style="width: 100%"/></a></div>
<div class="shop-info-text">
<h4>{{el.goods_name}}</h4>
<div class="shop-brief"></div> <div class="shop-price">
<div class="shop-pices">￥<b class="price">{{el.min_price}}</b></div>
</div>
</div>
</div>
<ul class="ml20 mt10">
<li class="mt5" ms-repeat="el.cart">
<div class="shop-info" style="background-color: white">
<input type="checkbox" name='checkbox' onclick="xuanonecheck(this)" class="check goods-check goodsCheck">
<div class="shop-info-text" style="margin-left: 25px;">
<div class="shop-brief">
<span ms-repeat="el.sale_attr">{{el}}</span>
<!-- <span>{{el.1}}</span> -->
</div> <div class="shop-price">
<div class="shop-pices">￥<b class="price">100*/个</b></div>
<div class="shop-brief" style="font-size: 15px;">快递：包邮</div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus" onclick="delpubls(this)">-</a>
<input type="number" style="min-height: 20px;font-size: -2.2rem" ms-attr-carid="el.cart_id" ms-attr-price="el.min_price" class="num" ms-attr-value="{{el.buy_num}}"/>
<a href="javascript:;" class="plus" onclick="addpubls(this)">+</a>
</div>
<div class="shop-arithmetic" style="margin-top: 30px;border: 0px;right:10px">
<!--<a href="">编辑</a>
<a href="">编辑</a>
-->
<!-- <div class="" style="right: 10px;">
<label ms-click="bianji(el.id)"><span ><img src="./images/buy/bj.png" style="width:20px;height: 18px;padding-right: 5px"/></span>编辑</label>
<label ms-click='delcar(el.id)'><span><img src="./images/buy/sc.png" style="width:20px;height: 18px;padding-right: 5px"/></span>删除</label>
</div> --> </div>
</div>
</div>
</div>
</li> </ul>
<div class="shopPrice mt10 pr5 mb15" style="text-align: right;height: 25px;background-color: white;line-height: 25px;">共<span>0</span>种<span>0</span>件|￥<span class="shop-total-amount ShopTotal">0.00</span></div>
</div> </div>
</div> <div class="payment-bar">
<div class="all-checkbox"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
<div class="shop-total" style="text-align: left;left: 20%;right: auto;margin: 0px;line-height: 50px;">
<strong>总价：<span id="AllTotal" class="checkallprice total" style="font-size: 18px;float:right">0.00</span></strong>
</div>
<!-- <a href="#" class="settlement" id='allzhifu' ms-click='gozhifu()' style="background-color:#fe8418;display: none">结算(<span>1</span>)</a> -->
<a href="#" class="settlement" id='allshanchu' style="background-color:#fe8418;display: none;width: 180px;" ms-click='shanchu()'>删除(<span class="checkallnum">0</span>)</a>
<a href="#" class="settlement" style="width: 180px;" id='alltijiao' ms-click='tijiao()'>结算(<span class="checkallnum">0</span>)</a> <!--<a href="#" class="settlement" id='allshanchu' style="display: none" ms-click='shanchu()'>删除</a>-->
</div> </div> </div>
<script>
//左边按钮
function a (){
var oBar = document.getElementById("bar");
var oUl = document.querySelector(".bar ul");
//获取其中一个li的宽度 小w
var w = document.querySelectorAll(".bar ul li")[0].offsetWidth;
var num = $(".clear li").length;
num1 = (num-3)*100*-1;
if ((oUl.offsetLeft-w)<num1) {
$msg('已经到头了');
return false;
};
//复制一份ul里的内容
oUl.innerHTML = oUl.innerHTML;
//一个ul的宽度 大W
var W = oUl.offsetWidth;
oUl.style.left = oUl.offsetLeft-w+'px';
//走到一半，把ul拉回来
if(oUl.offsetLeft < -W){
oUl.style.left=0;
}
goaddcheck();
}
// licheck
//右边按钮
function b(){
var oBar = document.getElementById("bar");
var oUl = document.querySelector(".bar ul");
//获取其中一个li的宽度 小w
var w = document.querySelectorAll(".bar ul li")[0].offsetWidth;
// alert(oUl.offsetLeft-w);
if ((oUl.offsetLeft+w)>0) {
$msg('已经到头了');
return false;
};
oUl.innerHTML = oUl.innerHTML;
//每点击一下让ul往右移动一个li的宽度
oUl.style.left = oUl.offsetLeft+w+'px';
//往右走到头，拉回来
if(oUl.offsetLeft==w){
oUl.style.left=-W+w+'px';
}
goaddcheck(); }
goaddcheck();
function goaddcheck(){
$(".clear li").click(function(){ $(".clear li").removeClass('licheck');
$(this).addClass('licheck'); })
}
//选中第二个
function checktwocolor(){
var clear_all = $(".clear li");
//如果只有一个选中第一个
if (clear_all.length==1) {
clear_all.eq(0).addClass('licheck');
}else{
for (var i = clear_all.length - 1; i >= 0; i--) {
//选中第二个
if (i==1) {
clear_all.eq(i).addClass('licheck');
}
}
} } $('#dandu').toggle();
$('#wode').toggle();
//全选
$("#AllCheck").click(function(){
$("[name='checkbox']").attr("checked",$("#AllCheck").attr("checked"));//取消全选
if ($("#AllCheck").is(":checked")) {
$("[name='checkbox']").prop("checked",'checked');//全选
$('.num').attr('class','num mychecknum');
}else{
$("[name='checkbox']").removeAttr("checked");//取消全选
$('.num').attr('class','num');
// $('.checkallnum').text('0');
}
setcheckallnum();
});
// goodsCheck onegoodsallcheck
//某一种商品全部选中
function onegoodsallcheck(now){ var aaa = now.parentNode.parentNode.getElementsByClassName('goodsCheck');
if(now.checked){
for(i=0;i<aaa.length;i++){
// aaa[i].checked = 'checked';
aaa[i].setAttribute('checked','checked');
aaa[i].checked = true;
if (i!=0) {
var bbb = aaa[i].parentNode.getElementsByClassName('num');
// alert('')
bbb[0].className = "num mychecknum";
};
}
// $('.checkallnum').text($('.num').length);
}else{
for(i=0;i<aaa.length;i++){
// aaa[i].checked = false;
aaa[i].removeAttribute('checked');
aaa[i].checked = false;
if (i!=0) {
var bbb = aaa[i].parentNode.getElementsByClassName('num');
bbb[0].className = "num";
};
}
}
setcheckallnum();
}
//获取当前被选中的数量 给下方赋值
function setcheckallnum(){
var aaa = document.getElementsByClassName('num mychecknum');
var checkallnum = document.getElementsByClassName('checkallnum');
for (var i = checkallnum.length - 1; i >= 0; i--) {
checkallnum[i].innerText = aaa.length;
};
setcheckallprice();
}
//获取当前所有价格，给下方赋值
function setcheckallprice(){
// checkallprice
var aaa = document.getElementsByClassName('num mychecknum');
if (aaa.length==0) {
var ccc = document.getElementsByClassName('checkallprice');
ccc[0].innerText = '0.00';
return false;
};
//算出选择的总价
var allprice = 0;
for (var i = aaa.length - 1; i >= 0; i--) {
var nowprice = aaa[i].getAttribute('price');
var nownum = aaa[i].value;
allprice = allprice+(nowprice*nownum);
};
var ccc = document.getElementsByClassName('checkallprice');
ccc[0].innerText = allprice; } //单选的按钮
function xuanonecheck(now){
var aaa = now.parentNode.getElementsByClassName('num');
// alert(aaa.length);
// return false;
if(now.checked){
//取消
now.setAttribute('checked','checked');
//设置后面input为选中、
aaa[0].className = "num mychecknum";
}else{
// 默认
now.removeAttribute('checked');
aaa[0].className = "num";
}
setcheckallnum();
} function addpubls(now){ var previousnode = now.previousElementSibling;
var a = parseInt(previousnode.value)
a += 1;
previousnode.value = a;
setcheckallprice()
}
function delpubls(now){ var nextnode = now.nextElementSibling;//获取下一个节点
var a = parseInt(nextnode.value);
a -= 1;
a = a > 0 ? a : 0;
nextnode.value = a;
setcheckallprice()
}
// function setregui(){
// $('.plus').click(function(){
// var num = 0;
// var ninpu = $(this).prev();
// var num = parseInt(ninpu.val())+1;
// alert(num);
// ninpu.val(num);
// })
// $('.minus').click(function(){
// var num = 0;
// var ninpu = $(this).next();
// if(parseInt(ninpu.val())>0){
// num = parseInt(ninpu.val())-1;
// }else{
// num = 0;
// }
// alert(num);
// ninpu.val(num);
// })
// } //点击右上角编辑
function bianjitop(){
$('#allzhifu').toggle();
$('#allshanchu').toggle();
$('#alltijiao').toggle();
$('.wancheng').toggle();
$('.bianji').toggle();
}
//点击下方完成
function minbianji(){
$('#dandu').toggle();
$('#wode').toggle();
}
(function(name) {
//avalon 开始
if(Main.ava[name] == undefined) {
Main.ava[name] = avalon.define({
$id: name,
//配置开始
name: name,
carlist: [], toxiaxia: function(id) {
towin('xianxia', false, {
id: id,
});
},
//删除购物车
shanchu: function(id) {
var string = '';
var allnum = $('.mychecknum');
for (var i = allnum.length - 1; i >= 0; i--) {
if (string!='') {
string = string+',';
}
var nowinput = allnum[i];
// string = string+nowinput.getAttribute('carid')+'-'+nowinput.value;
string = string+nowinput.getAttribute('carid');
}
// alert(string);
if (string=='') {
$msg('没有选择商品');
return false;
}
addajaxlist('shop_cartdel', {
cart_id:string
}, function(data) {
// alert(data);
if(data.status) {
$msg(data.msg);
} else {
$msg(data.msg); }
});
ajaxgo(); // Main.obj['buy_index10'].go();
},
//点击商品中的编辑
bianji:function(){
//将选择的数据添加进入遮罩层
$('#allzhifu').toggle();
$('#allshanchu').toggle();
$('#alltijiao').toggle();
$('.wancheng').toggle();
$('.bianji').toggle();
$('#dandu').toggle();
$('#wode').toggle();
},
tijiao:function(){
var string = '';
var allnum = $('.mychecknum');
for (var i = allnum.length - 1; i >= 0; i--) {
if (string!='') {
string = string+'|';
}
var nowinput = allnum[i];
// string = string+nowinput.attr('carid')+'-'+nowinput.val();
// string = string+nowinput.getElementsByTagName('carid')+'-'+nowinput.val();
string = string+nowinput.getAttribute('carid')+'-'+nowinput.value;
}
// alert(string);
if (string=='') {
$msg('没有可提交的商品');
return false;
}
// var string_id = '';
// var array_id = [];
addajaxlist('shop_cart_order', {
goods_sting:string
}, function(data) {
// alert(data);
if(data.status) {
$msg(data.msg);
// array_id = data.data;
// for (var i = array_id.length - 1; i >= 0; i--) {
// if (string_id!='') {
// string_id = string_id+',';
// }
// string_id = string_id+array_id[i].cart_id;
// }
} else {
$msg(data.msg); }
});
ajaxgo();
// alert(string_id);
} });
}
//avalon 结束
//class 开始
var info = Main.ava[name];
var Cls = {
createNew: function() { //实例化ajax类
var ajax_obj = ajaxCls.createNew();
var addajaxlist = ajax_obj.addajaxlist;
var ajaxgo = ajax_obj.ajaxgo;
//实例化ajax类 --结束 var Class = {}; //类
//模拟类开始-----------------------------------------------------------------start
var info = Main.ava[name]; //公有属性--------------------------------------------- var win_name = name;
Class.setbase = function() { }; Class.go = function(objgo) {
//购物车列表
addajaxlist('shop_cartlist', {
}, function(data) {
if(data.status) {
var obj = data.data; // var description = "";
// for(var i in data){
// var property=data[i];
// description+=i+" = "+property+"\n";
// }
// alert(description);
// 列表
if(obj) {
info.carlist = obj;
} else {
info.carlist = [];
}
} else {
$msg(data.msg);
}
});
ajaxgo(objgo);
p(name + 'go');
}; //私有属性--------------------------------------------- //模拟类结束-----------------------------------------------------------------end
return Class;
}
} Main.obj[name] = Cls.createNew(); Main.obj[name].setbase();
Main.obj[name].go();
//class 结束
//附加预先运行函数
//这些加载要放在数据渲染之后
//重新加载点击颜色时间
goaddcheck();
//重新加载点击数量事件
// setregui();
// alert(2); })('buy_index10'); </script>