正文
js购物车计算价格
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
<!DOCTYPE html>
<html><head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>购物车</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
function jisuan(obj) {
var total = 0;
var jj = $(".jj");
var fruits = $('input[name="fruit"]')
for (var i = 0; i < fruits.length; i++) {
if (fruits[i].checked) {
total += (parseFloat(fruits[i].value) * parseFloat(jj[i].innerHTML));
}
}
$("#myspan").text(total);
} $(function() {
var inputs = $("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function() {
jisuan(this)
}
}
}) $("#btn").click(function() {
var mn = [];
var sum = 0;
var len = $('input[name="fruit"]:checked').length;
if (len == 0 || len < $('input[name="fruit"]').length) {
$('input[name="fruit"]').prop("checked", true);
$("ul li").each(function(index) {
if ($("input[name='fruit']").eq(index).prop('checked')) {
var dj = $('input[name="fruit"]:checked').eq(index).val();
var num = $('input[name="fruit"]:checked').eq(index).siblings("span").text();
mn.push(parseFloat(dj) * parseFloat(num));
}
})
$.each(mn, function(i) {
sum += mn[i];
}); $("#myspan").text(sum);
} else {
$('input[name="fruit"]').prop("checked", false);
$("#myspan").text(0)
} })
}) </script>
</head><body>
<button id="btn">全选</button>
<ul id="box">
<li>
<input type="checkbox" name="fruit" value="10" />10元 <span class="jj">10个</span></li>
<li>
<input type="checkbox" name="fruit" value="20" />20元 <span class="jj">20个</span></li>
<li>
<input type="checkbox" name="fruit" value="30" />30元 <span class="jj">30个</span></li>
<li>
<input type="checkbox" name="fruit" value="40" />40元 <span class="jj">40个</span></li>
<li>
<input type="checkbox" name="fruit" value="50" />50元 <span class="jj">50个</span></li>
</ul>
总价格是：<span id="myspan">0</span>元</body></html>
效果如下：
