<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<table border="1" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td class="all"><input type="checkbox"></td>
<td>名称</td>
<td>单价</td>
<td>颜色</td>
<td>重量</td>
<td>减少</td>
<td>数量</td>
<td>增加</td>
<td>总价</td>
<td>操作</td>
</tr>
<tr>
<td class="checked"><input type="checkbox"></td>
<td>小米手机</td>
<td class="price">1500</td>
<td>黑色</td>
<td>0.5kg </td>
<td class="btn">-</td>
<td class="number"> <input type="text" value="2" style="width:20px;"> </td>
<td class="btn">+</td>
<td class="totle">3000</td>
<td class="delete">删除</td>
</tr>
<tr>
<td class="checked"><input type="checkbox"></td>
<td>华为手机</td>
<td class="price">1698</td>
<td>蓝色</td>
<td>0.45kg </td>
<td class="btn">-</td>
<td class="number"> <input type="text" value="2" style="width:20px;"> </td>
<td class="btn">+</td>
<td class="totle">5094</td>
<td class="delete">删除</td>
</tr>
<tr>
<td class="checked"><input type="checkbox"></td>
<td>iphoneX</td>
<td class="price">7899</td>
<td>红色</td>
<td>0.6kg</td>
<td class="btn">-</td>
<td class="number"> <input type="text" value="2" style="width:20px;"> </td>
<td class="btn">+</td>
<td class="totle">55293</td>
<td class="delete">删除</td>
</tr>
</tbody>
</table>
</div>
<h3>所有商品合计: 0元</h3>
题主要的代码如下，有帮助
有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<table border="1" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td class="all"><input type="checkbox"></td>
<td>名称</td>
<td>单价</td>
<td>颜色</td>
<td>重量</td>
<td>减少</td>
<td>数量</td>
<td>增加</td>
<td>总价</td>
<td>操作</td>
</tr>
<tr>
<td class="checked"><input type="checkbox"></td>
<td>小米手机</td>
<td class="price">1500</td>
<td>黑色</td>
<td>0.5kg </td>
<td class="btn">-</td>
<td class="number"> <input type="text" value="2" style="width:20px;"> </td>
<td class="btn">+</td>
<td class="totle">3000</td>
<td class="delete">删除</td>
</tr>
<tr>
<td class="checked"><input type="checkbox"></td>
<td>华为手机</td>
<td class="price">1698</td>
<td>蓝色</td>
<td>0.45kg </td>
<td class="btn">-</td>
<td class="number"> <input type="text" value="1" style="width:20px;"> </td>
<td class="btn">+</td>
<td class="totle">1698</td>
<td class="delete">删除</td>
</tr>
<tr>
<td class="checked"><input type="checkbox"></td>
<td>iphoneX</td>
<td class="price">7899</td>
<td>红色</td>
<td>0.6kg</td>
<td class="btn">-</td>
<td class="number"> <input type="text" value="2" style="width:20px;"> </td>
<td class="btn">+</td>
<td class="totle">15798</td>
<td class="delete">删除</td>
</tr>
</tbody>
</table>
</div>
<h3>所有商品合计: <span id="tl">0</span>元</h3>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
$('td.btn').click(function () {
var op = this.innerText, ipt = $(this)[op == '-' ? 'next' : 'prev']().find('input'), v = parseInt(ipt.val());
v += op == '-' ? -1 : 1;
if (v < 0) v = 0;
ipt.val(v);
var tr = ipt.closest('tr');
tr.find('td.totle').html(v * parseFloat(tr.find('.price').text()));
getTotal();
})
$('td.delete').click(function () {
if (confirm('确认删除？')) {
$(this).closest('tr').remove();
checkboxs = $('#box :checkbox');
getTotal();
}
});
var checkboxs = $('#box :checkbox').change(function () {
var el = $(this)
if (el.parent().attr('class') == 'all') {
checkboxs.not(this).prop('checked', this.checked);
}
else {
checkboxs.eq(0).prop('checked', checkboxs.parent().filter(':not(.all)').find(':checkbox').filter(':checked').length == checkboxs.length - 1);
}
getTotal();
});
function getTotal() {
var sum = 0;
checkboxs.parent().filter(':not(.all)').find(':checkbox').filter(':checked').closest('tr').each(function () {
sum += parseFloat($(this).find('.totle').text())
})
$('#tl').html(sum);
}
</script>