如何從兩個不同的復選框值更改跨度文本

Question

嘗試將各種價格相乘，然后乘以乘數（無天數），我的功能適用於100公里，但更改為200公里時不會產生任何結果，其中100公里為R125 /天，而200公里為R225 /天。 這些以“每日”和“總計”的范圍表示， daily being the sum of extra's + 100kms而“ Total being = multiplier * extras + multiplier * 100kms

我已經在一些建議的幫助下重寫了我的腳本，但是遇到了另一個問題，即獲取第二個值來顯示200km值。 我的小提琴在這里： https : //jsfiddle.net/shiataz12/mjnqth3L/169/

我想到嘗試這樣的事情：

$("#qr1").click(function() {
displayVals1();
});
$("#qr2").click(function() {
displayVals2();
});

當選中200kms復選框作為基本值時，嘗試獲取R225 /天和R1125 /天作為值。

Answer 1

因為我花了一點時間，所以將您的代碼減少到大約15行。

注意 ，所有輸入的更改都通過一個函數處理，每次僅重做所有數學運算。

 $(function() { $("input.kilo").change(function() { $("input.kilo").not(this).prop("checked", false); }); $("input, select").change(function() { //get the values of the selected options let v = $.map($("input[id^='qr']:checked"), function(i) { return parseFloat($(i).val()); }); let s = v.reduce((a, b) => a + b); //sum them up to a daily total console.log(v); $("#userdaily").text(s); $("#usertotal").text(s * parseFloat($("#mySelect>option:selected").val())); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="mySelect">No. Days</label> <select name="mySelect" id="mySelect"> <option name="one" value="1">1</option> <option name="two" value="2">2</option> <option name="three" value="3">3</option> <option name="four" value="4">4</option> <option name="five" value="5" selected>5</option> </select><br><br> <label for="checkbox1">100kms</label> <input type="checkbox" name="checkbox1" class="kilo" value="125" id="qr1" checked><br><br> <label for="checkbox2">200kms</label> <input type="checkbox" name="checkbox2" class="kilo" value="225" id="qr2"><br><br> <label for="checkbox3">Tyre</label> <input type="checkbox" name="checkbox3" value="20" id="qr3"><br><br> <label for="checkbox4">Glass</label> <input type="checkbox" name="checkbox4" value="20" id="qr4"><br><br> <label for="checkbox5">General</label> <input type="checkbox" name="checkbox5" value="60" id="qr5" checked><br><br> <label for="checkbox6">Third Party</label> <input type="checkbox" name="checkbox6" value="80" id="qr6"><br><br> Daily :<span id="userdaily"> </span><br><br> Total :<span id="usertotal"> </span><br><br> <input tyep="text" id="pricef1" name="pricef1" value=""> <input tyep="text" id="pricef2" name="pricef2" value="">