JQ实现简易的购物车附加全选，反选，单选，加减，小计，总计功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购物车</title>
<link href="css/gouwu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.4.0.js"></script>
</head>

  <div id="listdiv"> <h4>购物车</h4>
     <table width="750" cellpadding="0" cellspacing="0" id="gwcTable">
      <tr>
        <td width="79">
        <input type="checkbox" id="checkAll"/>全选  
        <input type="checkbox" id="checkAlls"/>反选
        </td>
        <td width="175">商品</td>
        <td width="92">单价</td>
        <td width="201">数量</td>
        <td width="96">小计</td>
        <td width="79">操作</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkCss" name="chekCss"/></td>
        <td><p><img src="images/shouji.jpg" /></p><p>华为手机P8</p></td>
        <td class="jiage">2000</td>
        <td class="count"><input class="reduceCss" value="-" type="button"/>
            <input type="text" class="inputCountCss" id="inputCountCss1" value="1" size="8"/>
            <input value="+" type="button" class="qwe"/></td>
        <td><input type="button" name="" id="stotal1" value="2000" readonly="readonly"/></td>
        <td class="del"; style="cursor:pointer;">删除</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkCss" name="chekCss"/></td>
        <td><p><img src="images/cfy.jpg"/></p><p>玫红色女款冲锋衣外套</p></td>
        <td class="jiage">600</td>
        <td class="count"><input class="reduceCss" value="-" type="button"/>
            <input type="text" class="inputCountCss" id="inputCountCss2" value="1" size="8"/>
            <input value="+" type="button" class="qwe"/></td>
        <td><input type="button" name="" id="stotal1" value="600" readonly="readonly"/></td>
        <td class="del"; style="cursor:pointer;">删除</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkCss" name="chekCss"/></td>
        <td><p><img src="images/tbx.jpg"/></p>
        <p>女款防滑透气徒步鞋</p></td>
        <td class="jiage">200</td>
        <td class="count"><input class="reduceCss" value="-" type="button"/>
            <input type="text" class="inputCountCss" id="inputCountCss3" value="1" size="8"/>
            <input value="+" type="button" class="qwe"/></td>
        <td><input type="button" name="" id="stotal1" value="200" readonly="readonly"/></td>
        <td class="del"; style="cursor:pointer;">删除</td>
      </tr>
    </table>
  </div>
  <div id="jiesuan">
       <div class="t jisuanbtn">
         <input type="submit" name="btnOrder" id="btnOrder" value="立即结算" />
       </div>
      <div class="t TotalMoney">合计：￥<span class="totalPrice">0</span></div>
      <div class="t">已选商品 <span id="countTotal">0</span> 件</div>
  </div>
</div>

/*=============================================================*/
                        //全选
/*=============================================================*/
$('#checkAll').click(function(){
    if($('#checkAll').prop("checked")==true){
        $('.checkCss').prop("checked",true)
    }else{
        $('.checkCss').prop("checked",false)
    }
    
    totalPrice();
//    namber();
})
/*=============================================================*/
                        //反选
/*=============================================================*/
$('#checkAlls').click(function(){
    $('.checkCss').each(function(){
            $(this).prop("checked",!$(this).prop("checked"))
            console.log($('.checkCss'))
    totalPrice();
    })
})
/*=============================================================*/
                        //单选
/*=============================================================*/
$('.checkCss').click(function(){
    totalPrice();
    console.log(this)
})

/*=============================================================*/
                        //删除
/*=============================================================*/
$('.del').click(function(){
    $(this).parent().remove()
    totalPrice();
//    namber();
})
/*=============================================================*/
                        //减/小计
/*=============================================================*/                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
$('.reduceCss').click(function(){
    $(this).next().val(parseInt($(this).next().val())-1)
        if ($(this).next().val()<1) {
                $(this).next().val(1);}
    $(this).parent().next().find("input").val($(this).parent().prev().text()*$(this).next().val())
        totalPrice();
//        namber();
})

/*=============================================================*/
                        //加/小计
/*=============================================================*/
$('.qwe').click(function(){
    $(this).prev().val(parseInt($(this).prev().val())+1)
    $(this).parent().next().find("input ").val($(this).parent().prev().text()*$(this).prev().val())
    totalPrice();
//    namber();
})

/*=============================================================*/
                        //总计
/*=============================================================*/
function totalPrice(){
    var num = 0;
     $('.checkCss').each(function(){
         console.log(this)
         if(this.checked==true){
             var b = $(this).parent().parent().find('#stotal1').val()
             //console.log(b)
             num += Number(b);
     //        console.log(num)     
         }
         $('.totalPrice').text(num) 
     })
}

JQ实现简易的购物车附加全选，反选，单选，加减，小计，总计功能

猜你喜欢