没学js,js都是网上扒的,想知道要怎么改才能实现勾选复选框后才计入总计QAQ
<!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>购物车</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
border: 0;
outline: 0
}
.biankuang {
border-collapse: collapse;
margin: 0 auto;
}
tr td,
th {
border: 2px solid black;
padding: 10px;
}
.jian,
.jia,
.shuliang {
width: 25px;
}
</style>
</head>
<body>
<table class="biankuang">
<thead>
<tr>
<th>全选<input type="checkbox" class="checkall"></th>
<th>书名</th>
<th>数量</th>
<th>单价</th>
<th>状态</th>
<th>库存</th>
<th>小计</th>
</tr>
</thead>
<tr>
<td><input type="checkbox" class="checksin"></td>
<td>《C语言程序设计》</td>
<td>
<button class="jian">-</button>
<input type="text" class="shuliang" value="0">
<button class="jia">+</button>
</td>
<td>69.00</td>
<td>有货</td>
<td><span class="kucun">10</span></td>
<td class="xiaoji">0.00</td>
</tr>
<tr>
<td><input type="checkbox" class="checksin"></td>
<td>《Web前端开发基础》</td>
<td>
<button class="jian">-</button>
<input type="text" class="shuliang" value="0">
<button class="jia">+</button>
</td>
<td>48.00</td>
<td>有货</td>
<td><span class="kucun">10</span></td>
<td class="xiaoji">0.00</td>
</tr>
<tr>
<td><input type="checkbox" class="checksin"></td>
<td>《高等数学(上册)》</td>
<td>
<button class="jian">-</button>
<input type="text" class="shuliang" value="0">
<button class="jia">+</button>
</td>
<td>31.00</td>
<td>有货</td>
<td><span class="kucun">10</span></td>
<td class="xiaoji">0.00</td>
</tr>
<tr>
<td colspan="6">总计</td>
<td class="total">0.00</td>
</tr>
</table>
<script type="text/javascript">
$(".checkall").on("click", function () {
var flag = $(this)[0].checked;
$(".checksin").each(function () {
$(this)[0].checked = flag;
})
result()
});
$(".checksin").on("click", function () {
var i = 0;
$(".checksin").each(function () {
if ($(this)[0].checked == false) {
$(".checkall")[0].checked = false;
} else {
i += 1;
if (i == $(".checksin").length) {
$(".checkall")[0].checked = true;
}
}
})
result()
});
$(".jia").click(function () {
var num = $(this).prev().val();
if (num == 10) {
return;
}
$(this).prev().val(parseInt(++num));
$(this).parent().next().next().next().text(10 - num)
if ($(this).parent().next().next().next().text() == 0) {
$(this).parent().next().next().text('无货')
}
money()
})
$(".jian").click(function () {
var num = $(this).next().val();
if (num == 0) {
return;
}
$(this).next().val(parseInt(--num));
$(this).parent().next().next().next().text(10 - num)
$(this).parent().next().next().text('有货')
money()
})
function money() {
var price = $('.jia').parent().next();
var num = $('.jia').prev();
var xiaoji = $('.xiaoji');
var sum = 0.0;
$("td").each(function () {
if ($(this).find(".checksin")[0].checked == true) {
for (var i = 0; i < price.length; i++) {
var price1 = parseFloat(price.eq(i).text());
var num1 = parseFloat(num.eq(i).val());
xiaoji.eq(i).text((price1 * num1).toFixed(2))
sum += price1 * num1;
}
$('.total').text(sum.toFixed(2));
}
else
{return false;}
})
}
</script>
</body>
</html>