在 jQuery 中获取选定的单选按钮和复选框十进制值

Question

我从data-attribute中获取值并使用jQuery进行计算。但它没有显示十进制值的正确值。但是它适用于没有十进制值的情况。谁能帮我？

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="optionfood">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal" value="20" checked data-price="20.00"><label for="choice1" class="width100">20.00</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal" value="30" data-price="30.00"><label for="choice2" class="width100">30.00</label>
<hr>
<input type="checkbox" class="form-check-input" id="check1" value="30.00" data-price="30.00"><label for="check1" class="width100">30.00</label>
<input type="checkbox" class="form-check-input" id="check2" value="35.50" data-price="35.50"><label for="check2" class="width100">35.50</label>
<input type="checkbox" class="form-check-input" id="check3" value="45.50" data-price="45.50"><label for="check3" class="width100">45.50</label>
<input type="checkbox" class="form-check-input" id="check4" value="50.00" data-price="50.00"><label for="check4" class="width100">50.00</label>
<input type="checkbox" class="form-check-input" id="check5" value="40.50" data-price="40.50"><label for="check5" class="width100">40.50</label>
</div>
<br><br>
<div>Total is</div><div class="modlcstmtotal"></div>

Answer 1

由于.toFixed()返回一个字符串值，因此tot += price;是字符串连接，而不是加法。

在输出中使用.toFixed()，而不是在计算中使用：

$(document).ready(function() {
$('#optionfood').on('change', function() {
update_total();
});
function update_total() {
var tot = 0;
var price = 0;
$('#optionfood input:checked').each(function() {
price = parseFloat($(this).data('price'));
if (price > 0) {
tot += price;
}
});
$('#optionfood select').each(function() {
price = parseFloat($("option:selected", this).data('price'));
if (price > 0) {
tot += price;
}
});
$('.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="optionfood">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal" value="20" checked data-price="20.00"><label for="choice1" class="width100">20.00</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal" value="30" data-price="30.00"><label for="choice2" class="width100">30.00</label>
<hr>
<input type="checkbox" class="form-check-input" id="check1" value="30.00" data-price="30.00"><label for="check1" class="width100">30.00</label>
<input type="checkbox" class="form-check-input" id="check2" value="35.50" data-price="35.50"><label for="check2" class="width100">35.50</label>
<input type="checkbox" class="form-check-input" id="check3" value="45.50" data-price="45.50"><label for="check3" class="width100">45.50</label>
<input type="checkbox" class="form-check-input" id="check4" value="50.00" data-price="50.00"><label for="check4" class="width100">50.00</label>
<input type="checkbox" class="form-check-input" id="check5" value="40.50" data-price="40.50"><label for="check5" class="width100">40.50</label>
</div>
<br><br>
<div>Total is</div><div class="modlcstmtotal"></div>

Answer 2

加号一元运算符返回对象的数值表示形式。尝试在变量(tot和price(之前添加加号 (+(：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="optionfood">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal" value="20" checked data-price="20.00"><label for="choice1" class="width100">20.00</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal" value="30" data-price="30.00"><label for="choice2" class="width100">30.00</label>
<hr>
<input type="checkbox" class="form-check-input" id="check1" value="30.00" data-price="30.00"><label for="check1" class="width100">30.00</label>
<input type="checkbox" class="form-check-input" id="check2" value="35.50" data-price="35.50"><label for="check2" class="width100">35.50</label>
<input type="checkbox" class="form-check-input" id="check3" value="45.50" data-price="45.50"><label for="check3" class="width100">45.50</label>
<input type="checkbox" class="form-check-input" id="check4" value="50.00" data-price="50.00"><label for="check4" class="width100">50.00</label>
<input type="checkbox" class="form-check-input" id="check5" value="40.50" data-price="40.50"><label for="check5" class="width100">40.50</label>
</div>
<br><br>
<div>Total is</div><div class="modlcstmtotal"></div>

Answer 3

$(document).ready(function() {
$('#optionfood').on('change', function() {
update_total();
});
function update_total() {
var tot = 0;
var price = 0;
$('#optionfood input:checked').each(function() {
price = parseFloat($(this).data('price'));
if (price > 0) {      
tot += +price;
}
});
$('#optionfood select').each(function() {
price = parseFloat($("option:selected", this).data('price')).toFixed(2);
if (price > 0) {
tot += price;
}
});
$('.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="optionfood">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal" value="20" checked data-price="20.00"><label for="choice1" class="width100">20.00</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal" value="30.5" data-price="30.00"><label for="choice2" class="width100">30.00</label>
<hr>
<input type="checkbox" class="form-check-input" id="check1" value="30.00" data-price="30.00"><label for="check1" class="width100">30.00</label>
<input type="checkbox" class="form-check-input" id="check2" value="35.50" data-price="35.50"><label for="check2" class="width100">35.50</label>
<input type="checkbox" class="form-check-input" id="check3" value="45.50" data-price="45.50"><label for="check3" class="width100">45.50</label>
<input type="checkbox" class="form-check-input" id="check4" value="50.00" data-price="50.00"><label for="check4" class="width100">50.00</label>
<input type="checkbox" class="form-check-input" id="check5" value="40.50" data-price="40.50"><label for="check5" class="width100">40.50</label>
</div>
<br><br>
<div>Total is</div><div class="modlcstmtotal"></div>

当没有分数时，价格被视为string。因此，我在求和之前将价格转换为数字tot += +price。