<!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>