JQUERY -动态计算价格表中的字段值。

Question

我有一个价目表，并希望在一个表格中显示一个用户的选择和它的总价格的摘要。

为了做到这一点，我试着这样做

HTML

<div>
  <p>PICK ONE</p>
  <input type="radio" name="weight" value="range-1" checked><label>0-10 ($ 10)</label>
  <input type="radio" name="weight" value="range-2"><label>10-20 ($ 20)</label>
  <input type="radio" name="weight" value="range-3"><label>20-30 ($ 30)</label>
</div>

<div>
  <p>ADD EXTRA</p>
  <input type="checkbox" id="urgentchk" name="urgentchk" value="1" /><label>Urgent ($ 40)</label>
  <input type="checkbox" id="meetchk" name="meetchk" value="1" /><label>Meet ($ 60)</label>
</div>

<div>
  <p>TOTAL</p>
  <table id="items"></table>
  <table id="total"></table>
</div>

JQ

$('#urgentchk').change(function() {
   if(this.checked)
   {
      var content = "<tr id='one'><td>Urgent $ 40</td></tr>";
      var prize = parseFloat($(this).attr('prize'));
      $('#items').append(content);
   }
   else
   {
      $('#one').remove();
   }
});

$('#meetchk').change(function() {
   if(this.checked)
   {
      var content = "<tr id='two'><td>Meet $ 60</td></tr>";
      var prize = parseFloat($(this).attr('prize'));
      $('#items').append(content);
   }
   else
   {
      $('#two').remove();
   }
});

现在，不幸的是，我有两个问题我不知道如何解决：

• 在#items中显示所选字段(无线电按钮)，与字段复选框相同。
• 计算#总计中选定字段的价格(和)。

我怎么能这么做？谢谢

小提琴

Answer 1

首先，您需要创建一个负责计算总计的函数。在此之后，每次需要重新计算总计时，都需要调用此函数:页面加载、元素更改等等。

var updateTotal = function () {

    var total = 0;

    total += parseFloat($('input[name=weight]:checked').attr('prize'));

    total += ($('input[name=urgentchk]:checked').length > 0) ? parseFloat($('input[name=urgentchk]:checked').attr('prize')) : 0;

    total += ($('input[name=meetchk]:checked').length > 0) ? parseFloat($('input[name=meetchk]:checked').attr('prize')) : 0;

    $('#total').html("Total: $" + total);

};

然后，只要您认为合适，就只需调用此函数：

updateTotal();

例如，在检查#meetchk之后

$('#meetchk').change(function() {

   if(this.checked)
   {
      ...
   }

   updateTotal();

});

这将永远重新计算总价格从零。有时它会很昂贵，这取决于您的应用程序。请看一下下面的小提琴。祝好运!

http://jsfiddle.net/pq46skgn/5/