Javascript使用each(）为复选框返回正确的值

Javascript return correct value for checkbox using each()

本文关键字：返回 复选框 使用 each Javascript      更新时间：2023-09-26

当用户点击复选框并进行一些计算时，我试图返回一些金额。但如果我尝试选中两个复选框，结果总是返回错误的值。

$('.type_checkbox input[type="checkbox"]').each(function (index) {
    if ($(this).is(':checked')) {
            checkbox_price_prefix = $(this).data('prefix-checkbox');
            checkbox_price = checkbox_price_prefix + $(this).data('price-checkbox');   // <----- += or =
    }
});

你可以试试这里

问题是，当用户尝试检查类型A和类型B时，结果假定为RM90

您不是在计算总数，而是在替换它。更改：

checkbox_price = checkbox_price_prefix + $(this).data('price-checkbox');

收件人：

checkbox_price += parseFloat(checkbox_price_prefix + $(this).data('price-checkbox'));

问题是在每次循环迭代中都覆盖变量的值。。。

var checkbox_price = 0;
$('.type_checkbox input[type="checkbox"]').each(function (index) {
    if ($(this).is(':checked')) {
        checkbox_price += parseInt($(this).data('prefix-checkbox') + $(this).data('price-checkbox'),10);
    }
});

在每个的作用域之外声明变量，然后用选中收件箱的值增加其值，就可以随心所欲了。

通过一些jQuery选择器优化：

var checkbox_price = 0;
$('.type_checkbox input[type="checkbox"]:checked').each(function (index) {
        checkbox_price += parseInt($(this).data('prefix-checkbox') + $(this).data('price-checkbox'),10);
});

这里有很多问题：

  • 您正在覆盖总值，而不是将它们相加
  • 不能通过串联字符串-和20来获得值-20

您也不需要在每个循环中检查:checked。只需将其包含在您的选择器中：

var optionCheckbox = function optionCheckbox() {
    var totalAdjustment = 0;
    $('.type_checkbox input[type="checkbox"]:checked').each(function () {
        var prefix = $(this).data('prefix-checkbox');
        var price = $(this).data('price-checkbox');
        totalAdjustment += prefix === '-' ? -price : +price;
    });
    return totalAdjustment ;
};

您的问题在于计算函数

 total = 100 + parseFloat(option_checkbox_return);

100必须声明为全局变量，并初始化为100

var x=100;
var optionCheckbox = function optionCheckbox() {
    var checkbox_price_prefix;
    var checkbox_price = 0;
    // Loop Checkbox
    $('.type_checkbox input[type="checkbox"]').each(function (index) {
        if ($(this).is(':checked')) {
            checkbox_price_prefix = $(this).data('prefix-checkbox');
            checkbox_price = checkbox_price_prefix + $(this).data('price-checkbox');
        }
    });
    return checkbox_price;
}
    function calculateTotal() {
        var option_checkbox_return = optionCheckbox();
        total = x + parseFloat(option_checkbox_return);
        x=total;
        result = parseFloat(Math.round(total * 100) / 100).toFixed(2); // Convert to 2 decimal places
        $('.price_placeholder').html('RM' + result);
    }
$('.type_checkbox input[type="checkbox"]').on('click', function () {
    calculateTotal();
});
相关文章：