CODEWITHSUNDEEP
javascriptjquery
milenmk
milenmk

Reputation: 548

Calculate sum for two values per radio button for a group of buttons with JS

I have 4 groups of radio buttons and each group has 4 buttons. Each button has set two values separated with | i.e.:

<input type="radio" id="t20" name="train2" value="0|0">
<input type="radio" id="t20" name="train2" value="5|0.19">
<input type="radio" id="t20" name="train2" value="10|0.19">
<input type="radio" id="t20" name="train2" value="15|0.19">

All 4 groups follow above example - different number for the first value, and same number for second value of buttons 2,3 and 4. From each group I have only 1 button checked.

I have a java script that has to make some calculations for the values of the checked buttons:

$(document).ready(function()
{   
var total = 0;
function calcTotal()
{
    $("input:checked").each(function()
    {
        var value = $(this).attr("value");
        var array = value.split('|')
        var firstValue = array[0];
        var secondValue = array[1];
        total += parseFloat(firstValue);
    });
}
calcTotal();
$("sum").before('<font class="total" style="font-family: Myriad Pro, Gill Sans, Gill Sans MT, Calibri, sans-serif; font-size: 18px; font-weight: bold;">' + total + '</font>');
});

The result for the sum of the first values for the checked radio buttons is OK. The updated some if you change some of the selection also.

What I can not do properly is to calculate the sum for the second values and output them at the same manner. I've been trying for a day with no luck.

NOTE I need the sums ONLY for the checked buttons. But I need one sum of the first values and another sum of the second once

NOTE2 In each group I have checked ONLY 1 button, this is why I need $("input:checked").each(function() so it is not the sum from 4 buttons in 1 group.

NOTE3 full code http://jsfiddle.net/P3ZyH/10/

Any help highly appreciated.

Finally I found what's wrong ... it was very hard to stop me brak through the wall with my head.

There is last group of 2 rafio buttons and I forgot to assign their second value. SO now all is working OK.

If anyone is interested - http://jsfiddle.net/milenmk/P3ZyH/17/

Upvotes: 1

Views: 1920

Answers (2)

Ram
Ram

Reputation: 144729

each set of radio buttons with the same name only returns value of selected radio button if you want to find the values of all of them you should not select :checked value.

$(":radio").each(function(){

})

http://jsfiddle.net/KRMjX/

if you want to do some action on selected input you can use change event handler:

$("input:checked").change(function(){
    var value = $(this).attr("value");
    var array = value.split('|')
    var firstValue = array[0];
    var secondValue = array[1];
    total += parseFloat(firstValue);
})

if you want to only check values of first 2 inputs try this:

$(":radio").each(function(i, v){
    if (i < 2) {
    var value = $(this).attr("value");
    var array = value.split('|')
    var val = array[0];
    var secondValue = array[1];
    total = parseFloat(val);
    }
})

http://jsfiddle.net/KRMjX/1/

Upvotes: 0

Jake M
Jake M

Reputation: 544

Check out this solution on jsfiddle.

Basically, you had some scope issues on the total variable, and you were only summing up the first value. I changed total to be an array, and summed both values in it.

What it sounds like you want though, is checkboxes, and for the total to update every time they check the boxes? This could be accomplished by adding an

$('#checkboxes').on("change",calcTotal);

to the checkbox field.

Upvotes: 1

Related Questions