如何从两个不同的复选框值更改跨度文本
How to change text of span from two different checkbox values
尝试将各种价格相加并乘以一个乘数(天数)我的函数适用于 100 公里,但当更改为 200 公里时不会产生任何结果,其中 100 公里是 R125/Day 和 200 公里是 R225/day。这些以每日和总计的跨度表示,daily being the sum of extra's + 100kms
和 Total being = multiplier * extras + multiplier * 100kms
我已经在一些建议的帮助下重写了我的脚本,但是 运行 变成了另一个问题,即显示第二个值,即 200km
值。我的 Fiddle 在这里:https://jsfiddle.net/shiataz12/mjnqth3L/169/
我想尝试这样的事情:
$("#qr1").click(function() {
displayVals1();
});
$("#qr2").click(function() {
displayVals2();
});
尝试将 R225/Day 和 R1125/day 作为值,当 200kms 复选框被选中作为基值时。
因为我有时间,所以我将您的代码减少到大约 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="">
尝试将各种价格相加并乘以一个乘数(天数)我的函数适用于 100 公里,但当更改为 200 公里时不会产生任何结果,其中 100 公里是 R125/Day 和 200 公里是 R225/day。这些以每日和总计的跨度表示,daily being the sum of extra's + 100kms
和 Total being = multiplier * extras + multiplier * 100kms
我已经在一些建议的帮助下重写了我的脚本,但是 运行 变成了另一个问题,即显示第二个值,即 200km
值。我的 Fiddle 在这里:https://jsfiddle.net/shiataz12/mjnqth3L/169/
我想尝试这样的事情:
$("#qr1").click(function() {
displayVals1();
});
$("#qr2").click(function() {
displayVals2();
});
尝试将 R225/Day 和 R1125/day 作为值,当 200kms 复选框被选中作为基值时。
因为我有时间,所以我将您的代码减少到大约 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="">