根据复选框计算总价

Question

我希望当有人点击复选框时，这个价格会加到总价中。或者按钮会更好？

我使用Django模型和表单在HTML上进行可视化。

$(document).ready(function() {
const ID_CHECK_1 = 'id_checkbox_1';
const ID_CHECK_2 = 'id_checkbox_2';
const ID_CHECK_3 = 'id_checkbox_3';
const ID_PRICE_1 = 'id_price_1';
const ID_PRICE_2 = 'id_price_2';
const ID_PRICE_3 = 'id_price_3';
const ID_TOTAL_PRICE = 'id_total_price';
var $check1 = $('#' + ID_CHECK_1);
var $check2 = $('#' + ID_CHECK_2);
var $check3 = $('#' + ID_CHECK_3);
var $price1 = $('#' + ID_PRICE_1);
var $price2 = $('#' + ID_PRICE_2);
var $price3 = $('#' + ID_PRICE_3);
var $total = $('#' + ID_TOTAL_PRICE);
var totalPrice = $total.val();
$($check1).click(function() {
if ($check1.is(":checked")) {
totalPrice += parseFloat($price1.val());
}
if ($check2.is(":checked")) {
totalPrice += Number($price2.val());
}

if ($check3.is(":checked")) {
totalPrice += Number($price3.val());
}
})
});

Answer 1

为什么不简单地声明变量呢。当您只需要元素时，并不需要将ID保存为常量。

var check1 = $('#id_checkbox_1');
var check2 = $('#id_checkbox_2');
var check3 = $('#id_checkbox_3');
var price1 = $('#id_price_1');
var price2 = $('#id_price_2');
var price3 = $('#id_price_3');
var total = $('#id_total_price');
var totalPrice = total.val();

在变量名前面加$有什么原因吗？我不熟悉django，但在Javascript/JQuery$中，它指的是JQuery，不应该在变量名中使用。

您还只在一个元素check1上添加了一个事件侦听器。假设您希望一个选中的元素添加到当前价格中，并在未选中时立即删除：

$('input:checkbox).off('click').on('click', function() {
// selects all <div> elements with checkbox attribute and adds click listener
// off() prevents event listeners stacking
if ($(this).is(":checked")) {
// $(this) refers to the element the event occured on
totalVal += currentprice;
} else {
totalVal -= currentprice;
}
});

别忘了你的分号！

现在假设您有三个以上要包含的定价元素，那么将元素和价格连接起来会很有用。目前你通过id获取你的元素和价格。你的HTML结构看起来怎么样？

为了计算价格，可以将数字存储在数据属性中。

// set price
check1.data('price', 235.5);
// read price 
var price1 = check1.data('price');

或者创建对象。你需要的确切代码很大程度上取决于你的HTML结构和你想要做的事情