通过复选框计算总价格
提问于 2019-12-27 23:48:20
我已经制作了一个脚本，根据选中的复选框获得一个数字，然后有一个输入，用户可以输入一个数字，然后根据我从复选框中获得的总数字进行计算。所以我的问题是，当我再次取消选中/选中复选框时，总数不会更新，我需要它自动更新。
// Total Price Calculator
function calc() {
var tots = 0;
$(".checks:checked").each(function() {
var price = $(this).attr("data-price");
tots += parseFloat(price);
});
$("#no-text").keyup(function() {
var value = parseFloat($(this).val());
$('#tots').text(value*tots.toFixed(2));
});
}
$(function() {
$(document).on("change", ".checks", calc);
calc();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checks" data-price="10">
<input type="checkbox" class="checks" data-price="10">
<input type="checkbox" class="checks" data-price="10">
<input type="number" id="no-text" placeholder="10">
<span id="tots">0.00</span>
所以我需要所有这些都是自动完成的，如果我选中第一个和第二个复选框，并将输入设置为数字5，它将计算价格，然后如果我取消选中一个复选框，它应该根据已经输入的数字自动更新价格，而不需要再次更新它。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-28 00:00:02
您可以在一个事件处理程序中包含多个元素，因此要包含#no-text，以便在更新复选框或输入时，它们都会触发calc事件
然后将$('#tots').text((number * tots).toFixed(2))移出旧的事件侦听器，并添加另一个变量来获取输入元素的值
// Total Price Calculator
function calc() {
// Get value from input
let number = parseFloat($('#no-text').val() || 0);
let tots = 0;
// Add Checkbox values
$(".checks:checked").each(function() {
tots += $(this).data("price");
});
// Update with new Number
$('#tots').text((number * tots).toFixed(2));
}
$(function() {
$(document).on('change', '.checks, #no-text', calc);
calc();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checks" data-price="10">
<input type="checkbox" class="checks" data-price="10">
<input type="checkbox" class="checks" data-price="10">
<input type="number" class="duration-input" id="no-text" placeholder="10">
<span id="tots">0.00</span>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59507045
复制相关文章
腾讯云开发者
