<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>lili</title> <script src="js/jQuery-1.8.2.min.js" type="text/javascript"></script> </head> <body> <table> <tr> <td><input type="checkbox" id="allCheck">全选</td> <td>商品名称</td> <td>单价</td> <td>数量</td> <td>小计</td> <td>操作</td> </tr> <tr> <td><input type="checkbox" class="singleCheck"></td> <td>女装</td> <td>100</td> <td class="smallnum"><span class="plus2">-</span><input type="text" value="1" size="1" class="num"><span class="plus">+</span></td> <td class="smallMoney">100</td> <td><a href="javascript:;" class="del">删除</a></td> </tr> <tr> <td><input type="checkbox" class="singleCheck"></td> <td>男装</td> <td>50</td> <td class="smallnum"><span class="plus2">-</span><input type="text" value="1" size="1" class="num"><span class="plus">+</span></td> <td class="smallMoney">50</td> <td><a href="javascript:;" class="del">删除</a></td> </tr> </table> <div>共<span class="totalNum">0</span>件商品，共<span class="totalPrice">0</span>元</div> </body> </html> <!-- 输入 全选，单选，+，-，删除 --> <!-- 输出 小计，总件数，总数量 --> <!-- 函数 smallMoney() ,total(),allCheck() --> <script> //小计函数 function smallMoney(arg,p){ // 输入jq对象和+- var num = arg.val() if(p=='+'){ num ++; }; if(p=='-'){ num --; }; arg.val(num); // 获取单价 var smallP = arg.parent().prev().text(); // 小计 arg.parent().next().text(smallP*num) }; //总件数，总数量函数 function total(){ // 输入 var totalNum = 0; var totalPrice = 0; // 遍历singleCheck $('.singleCheck').each(function(){ if($(this).is(':checked')){ num_Num += Number($(this).parent().parent().find('.smallnum .num').val()); num_Price += Number($(this).parent().parent().find('.smallMoney').text()) } }); // 修改总件数和总数量 $('.totalNum').text(num_Num); $('.totalPrice').text(num_Price) }; //全选函数 function allCheck(){ if($(t).is(':checked')){ $('.singleCheck').prop("checked", true) }else{ $('.singleCheck').prop("checked", false) }; }; // 点击全选 $('#allCheck').click(function(){ allCheck(); total(); }); // 点击单选 $('.singleCheck').click(function(){ total(); }); // 点击+ $('.plus').click(function(){ singlePrice($(this).prev(),'+'); total() }); // 点击- $('.plus2').click(function(){ singlePrice($(this).next(),'-'); total() }); // 点击删除 $('.del').click(function(){ $(this).parent().parent().remove(); total() }) </script>