jQuery:如何防止未勾选的商品价格被加到合计中？
在使用jQuery防止未勾选的商品价格被加到合计中时，你需要确保只有被勾选的商品的价格才会被计算到总价中。这通常涉及到检查商品的复选框是否被选中。
以下是一个简单的示例代码，展示了如何实现这一功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止未勾选的商品价格被加到合计中</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>商品列表</h2>
<ul id="product-list">
<li>
<input type="checkbox" class="product-checkbox"> 商品1 - ¥<span class="product-price">100</span>
</li>
<li>
<input type="checkbox" class="product-checkbox"> 商品2 - ¥<span class="product-price">200</span>
</li>
<li>
<input type="checkbox" class="product-checkbox"> 商品3 - ¥<span class="product-price">300</span>
</li>
</ul>
<h2>合计: ¥<span id="total-price">0</span></h2>
<script>
$(document).ready(function() {
// 初始化合计金额
updateTotalPrice();
// 监听复选框的点击事件
$('#product-list').on('change', '.product-checkbox', function() {
updateTotalPrice();
});
// 更新合计金额的函数
function updateTotalPrice() {
let total = 0;
$('.product-checkbox:checked').each(function() {
total += parseFloat($(this).siblings('.product-price').text());
});
$('#total-price').text(total.toFixed(2));
}
});
</script>
</body>
</html>在这个示例中，我们有一个商品列表，每个商品都有一个复选框和一个价格。我们使用jQuery来监听这些复选框的change事件。每当复选框的状态改变时，我们就调用updateTotalPrice函数来重新计算总价。
updateTotalPrice函数会遍历所有被选中的复选框，并累加它们对应的价格。最后，将计算出的总价更新到页面上的#total-price元素中。
这样，只有被勾选的商品的价格才会被加到合计中，未勾选的商品价格不会影响总价。
参考链接：
- jQuery 官网: https://jquery.com/
- jQuery 选择器文档: https://api.jquery.com/category/selectors/
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
