[英]Calculate subtotal and total with javascript
I am trying to add two values together. 我正在尝试将两个值加在一起。 The value of #price and the value of #subtotal.
#price的值和#subtotal的值。 Subtotal is being calculated with the Jquery script and is working.
小计正在使用Jquery脚本计算并且正在运行。 The other script isn't working but does work on its own.
另一个脚本不起作用,但可以单独起作用。
The div's #price, #subtotal and #total must be div's and cannot be changed into text fields with value. div的#price,#subtotal和#total必须是div的,并且不能更改为带值的文本字段。
Code: 码:
/* 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>
I'm not completely sure if I understand what you want... I guess is that when you click a checkbox, subtotal and total are updated. 我不确定我是否了解您想要的...我想是,当您单击复选框时,小计和总计都会更新。 If that's the case, you can do it with....
如果是这样,您可以...
$("#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');
I hope it helps 希望对您有所帮助
It looks like the reason you are not seeing the div#total
change is because it is not subscribed to the checkbox changes, whereas div#subtotal
is. 您似乎看不到
div#total
更改的原因似乎是因为它未订阅复选框更改,而div#subtotal
却未订阅。 I combined the contents of the two document ready functions, moved the div#total
into the change listener, and it's working as expected. 我结合了两个文档就绪函数的内容,将
div#total
移到了更改侦听器中,并且按预期工作。
See CodePen: https://codepen.io/anon/pen/OxjYBd 参见CodePen: https ://codepen.io/anon/pen/OxjYBd
The combined code: 组合代码:
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()));
});
});
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.