用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移到了更改偵聽器中，並且按預期工作。

參見CodePen： https ://codepen.io/anon/pen/OxjYBd

組合代碼：

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

希望能有所幫助。