js jquery 权限单选 bug修改以及正确代码 购物车数量加减
效果图废话不多直接上代码
用的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>
js jquery 权限单选 bug修改以及正确代码 购物车数量加减的更多相关文章
- js 购物车中，多件商品数量加减效果修改，实现总价随数量加减改变
<!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...
- 基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- js实现输入框数量加减【转】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 自己动手丰衣足食之 jQuery 数量加减插件
引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...
- js&jquery验证邮箱和手机号是否正确范例
实现源码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...
- 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）
之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...
- js实现购买数量加减效果
写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案 结构: js代码: <script type="text/javascript"> function ...
- js 购物车的数量加减，对应的总价也随机变化
html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...
- jquery 仿购物车的加减数量
<p>单价:3.95</p> <input id="min" name="" type="button" va ...
随机推荐
- IAR6.1的工程迁移到IAR6.5不能用的解决方法
1.重命名过时的CMSIS头文件 "... \ CMSIS \ CM3 \ CoreSupport \ core_cm3.h 比如:core_cm3.h.old 2.启用CMSIS:项目- ...
- 【转】jsoup的使用
Jsoup的使用 jsoup 是一款 Java 的HTML 解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于JQuery的操作方法 ...
- 浅谈windows.onload()与$(document).ready()
浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready ...
- 我对CSS选择器的认识
我对CSS选择器的认识 一.简述 CSS选择器是对HTML元素进行选择的筛选条件,大概可以分为两类: 特征选择器——根据元素自身所具有的某种特征进行筛选,比如名称.ID.属性等: 关系选择器——根据元 ...
- 用代码初始化AE控件许可
当AE二次开发与其他平台一起使用的时候,有时候会不方便加LicenseControl控件,需要用代码初始化许可: 在构造函数中初始化许可: public Form1() { InitializeCom ...
- Design Pattern ->Adaptor
Layering & Contract Philosophy With additional indirection Adaptee object just is as a member. A ...
- 【起航计划 020】2015 起航计划 Android APIDemo的魔鬼步伐 19 App->Dialog Dialog样式
这个例子的主Activity定义在AlertDialogSamples.java 主要用来介绍类AlertDialog的用法,AlertDialog提供的功能是多样的: 显示消息给用户,并可提供一到三 ...
- Appium 滑动界面swipe用法
Appium 滑动API:Swipe(int start x,int start y,int end x,int y,duration) 解释:int start x-开始滑动的x坐标, int st ...
- redis在Windows下以后台服务一键搭建哨兵(主从复制)模式(多机)
redis在Windows下以后台服务一键搭建哨兵(主从复制)模式(多机) 一.概述 此教程介绍如何在windows系统中多个服务器之间,布置redis哨兵模式(主从复制),同时要以后台服务的模式运行 ...
- ajax异步请求的使用情景
先上代码 var sysAllowedExts; $.ajax({ url: url+"/getExtSetting", //请求的url地址 dataType: "js ...