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>
                                 &nbsp;&nbsp;
                                 <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>