Javascript return correct value for checkbox using each()

Question

i try to return some amount when user click checkbox and do some calculation. But the result always return wrong value if i try to check two 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');   // <----- += or =
    }
});

You can try HERE

The problem is when user try to check type A and type B, the result suppose to be RM90

Not related with question: var optionCheckbox = function optionCheckbox() { is awesome. — Regent
– Regent, Commented Mar 5, 2015 at 9:48

Dhunt · Accepted Answer · 2015-03-05 10:00:18Z

2

You are not totaling you count - you are replacing it. change:

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

To:

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

answered Mar 5, 2015 at 10:00

Dhunt

1,5949 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Salketer · Accepted Answer · 2015-03-05 09:55:09Z

The problem is that you are overwritting the variables' value in each loop iteration...

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);
    }
});

Declaring the variable outside the scope of each, and then increment its value with the values of the checked inbox will do as you want.

And with some jQuery selector optimisation:

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);
});

JLRishe · Accepted Answer · 2015-03-05 09:56:13Z

0

There are a number of problems here:

You are overwriting the total value instead of summing them together
You cannot get the value -20 by concatenating the strings - and 20.

You also don't need to check :checked on each loop. Just include that in your selector:

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 ;
};

answered Mar 5, 2015 at 9:56

JLRishe

102k19 gold badges138 silver badges171 bronze badges

1 Comment

Regent Over a year ago

You cannot get the value -20 by concatenating the strings "-" and "20". What about parseFloat("-" + "20");, which does exist in original code?

Med.Amine.Touil · Accepted Answer · 2015-03-05 09:56:54Z

0

Your problem is in your calculate function

 total = 100 + parseFloat(option_checkbox_return);

100 must be declared as global variable and initialised to 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();
});

answered Mar 5, 2015 at 9:56

Med.Amine.Touil

1,2352 gold badges12 silver badges15 bronze badges

2 Comments

Med.Amine.Touil Over a year ago

@Regent i edited my answer and it will works :). i added the js code

Regent Over a year ago

Even though you didn't mention x = total; (which is important part of your idea), code is still incorrect. Here is fiddle, showing that it works incorrectly.

Collectives™ on Stack Overflow

Javascript return correct value for checkbox using each()

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related