无法检索多个单选按钮的值

Question

我有以下代码，我无法检索在我的计算中使用的第二个单选按钮的值。我有两个单选按钮组，每个组中都有两个值，但只有第一个单选按钮值被检索/使用。

$(document).ready(function() {
$('#option1').on('change', function() {
update_total();
});
$('#option2').on('change', function() {
update_total();
});

function update_total() {
var tot = 0;
var price = 0;
$('#option1 input:checked').each(function() {
price = parseFloat($(this).data('price'));
if (price >= 0) {
tot += price;
}
});
$('#option2 select').each(function() {
price1 = parseFloat($("option:selected", this).data('price1'));
if (price1 >= 0) {
tot += price1;
}
});
$('.modlcstmtotal').html(tot.toFixed(2));
}
update_total();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="option1">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal1" value="0" checked data-price="0"><label for="choice1" class="width100">Preferred Customer</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal1" value="1" data-price="1"><label for="choice2" class="width100">Not a Preferred Customer</label>
</div>
<hr>
<div id="option2"></div>
<input type="radio" class="form-radio-input" id="choice3" name="choicemodal2" value="0" checked data-price1="0"><label for="choice3" class="width100">Trusted Traveler</label>
<input type="radio" class="form-radio-input" id="choice4" name="choicemodal2" value="0.15" data-price1="0.15"><label for="choice4" class="width100">Not a Trusted Traveler</label>
</div>
<br><br>
<div>Total shipping cost is:</div>
<div class="modlcstmtotal"></div>

我试图调整我的html，但它没有工作。

Answer 1

你有几个错别字

<div id="option2">没有包装你的收音机。

，这里指的是select而不是input:checked

$("#option2 select")

---

然而，我对你的代码做了一些改进，以简化。由于您的价格也是收音机的价值，所以我只是循环遍历每个选中的收音机并获取其价值。在if语句中，如果值>= 0实际上是不需要的，除非你期望的值小于0。

$(document).ready(function() {
$('.form-radio-input').on('change', function() {
update_total();
});
function update_total() {
var tot = 0;

$(".form-radio-input:checked").each(function() {
tot += parseFloat($(this).val());
});

$('.modlcstmtotal').html(tot.toFixed(2));
}

update_total();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="option1">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal1" value="0" checked data-price="0"><label for="choice1" class="width100">Preferred Customer</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal1" value="1" data-price="1"><label for="choice2" class="width100">Not a Preferred Customer</label>
</div>
<hr>
<div id="option2">
<input type="radio" class="form-radio-input" id="choice3" name="choicemodal2" value="0" checked data-price1="0"><label for="choice3" class="width100">Trusted Traveler</label>
<input type="radio" class="form-radio-input" id="choice4" name="choicemodal2" value="0.15" data-price1="0.15"><label for="choice4" class="width100">Not a Trusted Traveler</label>
</div>
<br><br>
<div>Total shipping cost is:</div><div class="modlcstmtotal"></div>