基于复选框计算总价

ee7vknir  于 2021-09-08  发布在  Java
关注(0)|答案(1)|浏览(222)

我想当有人点击复选框这个价格加入到总价格。还是按钮会更好?
我使用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());
    }
  })
});
ej83mcc0

ej83mcc01#

为什么不更简单地声明变量呢。当您只需要元素时,实际上不需要将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结构以及您确切想要做什么。

相关问题