根据复选框计算总价答案

【问题标题】：Calculate total price based on checkboxes根据复选框计算总价
【发布时间】：2021-09-19 15:46:55
【问题描述】：

我希望当有人点击复选框时，此价格会添加到总价中。还是按钮会更好？

我使用 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());
    }
  })
});

【问题讨论】：

首先，您对代码有什么具体问题吗？其次，您能否将相关的 HTML 添加到问题中，以便我们创建问题的工作示例。（注意，我们需要这里的 HTML 代码，而不是 django 或任何其他创建 HTML 的服务器端代码）
您的问题是什么？旁注 - 不要像这样重复变量名称，$("#id_price3").val() 比使用所有变量更容易理解
亲爱的罗里，不，我的代码没有问题。我需要制作这个 jquery 来计算总价。 github.com/KoonAgni/hmls/commit/…
亲爱的 Lous-Justin，不是问题，只是有人告诉“不要在 if/for 语句中声明变量。如果绝对必须，请使用 let，这就是 let 的用途”，为什么像这样写。

标签： python jquery django

【解决方案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 结构以及您想要做什么。

【讨论】：