使用javascript

Question

我正在尝试将两个值一起添加。 #price的值和#subtotal的值。使用Jquery脚本计算小计并且正在运行。另一个脚本不起作用，但确实可以自行运行。

div的#price，＃subtotal和#total必须是div，不能更改为带有值的文本字段。

代码：

/* JQUERY */
jQuery(document).ready(function($) {
  $("#checkboxdiv input:checkbox").change(function() {
    var total = 0;
    $('#checkboxdiv input:checkbox:checked').each(function() {
      total += parseInt(this.value, 10);
    });
    $('#subtotal').text(total);
  });
});

/* JAVASCRIPT */
$(document).ready(function() {
  $("#total").append(addnumbers($("#price").html(), $("#subtotal").html()));
});

function addnumbers(price, subtotal) {
  return (Number(price) + Number(subtotal));
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="price">10500</div>

<div id="checkboxdiv">
  <input type="checkbox" value="300">Optie 1
  <input type="checkbox" value="750">Optie 2
  <input type="checkbox" value="25">Optie 3
  <input type="checkbox" value="1200">Optie 4
</div>

<div id="subtotal"></div>

<div id="total"></div>

Answer 1

我不完全确定我是否理解你想要的...我猜是当你点击一个复选框时，小计和总数会更新。如果是这样，你可以用....

$("#checkboxdiv input:checkbox").change(function() {

    var subtotal = 0;

    $('#checkboxdiv input:checkbox:checked').each(function() {
        subtotal += parseInt(this.value, 10);
    });

    $('div#subtotal').text(subtotal);
    $('div#total').text(parseInt($('div#price').text()) + subtotal);
});

// If you want to show the initial values, just trigger the event.
$("#checkboxdiv input:checkbox").trigger('change');

我希望它有所帮助

Answer 2

看起来您没有看到div#total更改的原因是因为它没有订阅复选框更改，而div#subtotal是。div#total。我结合了两个文档就绪函数的内容，将function addnumbers(price,subtotal){ return (Number(price) + Number(subtotal)); }; $(document).ready(function() { $("#checkboxdiv input:checkbox").change(function() { var total = 0; $('#checkboxdiv input:checkbox:checked').each(function() { total += parseInt(this.value, 10); }); $('#subtotal').text(total); $("#total").text(addnumbers($("#price").html(), $("#subtotal").html())); }); }); 移动到更改侦听器中，并且它按预期工作。

请参阅CodePen：https://codepen.io/anon/pen/OxjYBd

合并代码：

{{1}}

希望有所帮助。