CODEWITHSUNDEEP
javascriptjqueryradio-button
datisdesign
datisdesign

Reputation: 3195

how to sum radio button values only one time?

I am using this code to sum values from multiple radio buttons :

$(document).ready(function(){
    var total = 50000;
    $("input[type=radio]").change(function(){
        $("input[type=radio]:checked").each(function(){
            if (isNaN($(this).val())) {
                total = total;
            }
            else 
                total += parseFloat($(this).val());
        });
        $(".price_amount").text(total);
    });
});

the problem is that when user click on a radio button in a group and then select another radio button in that group the new value will be add to this, i want to only add one of the values to the total value.

for example in this group :

<div>
    <input type="radio" value="0" name="markuptype" class="pack_radio" checked="checked"><h4>W3C Valid HTML 4.01</h4>
    <span class="pack_price">-</span>
</div>
<div>
    <input type="radio" value="5000" name="markuptype" class="pack_radio"><h4>W3C Valid XHTML 1.0 Transitional</h4>
    <span class="pack_price">5,000</span>
</div>
<div>
    <input type="radio" value="15000" name="markuptype" class="pack_radio"><h4>W3C Valid XHTML 1.0 Strict</h4>
    <span class="pack_price">15,000</span>
</div>

when first time a user select seconed radio the 5000 will be add to total price, but if he change it to third option, 15000+5000 will be add to total, i want to have only one of them !

Upvotes: 0

Views: 2947

Answers (3)

Raghav
Raghav

Reputation: 9630

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <div>
        <input type="radio" value="0" name="markuptype" class="pack_radio" checked="checked"><h4>
            W3C Valid HTML 4.01</h4>
        <span class="pack_price">-</span>
    </div>
    <div>
        <input type="radio" value="5000" name="markuptype" class="pack_radio"><h4>
            W3C Valid XHTML 1.0 Transitional</h4>
        <span class="pack_price">5,000</span>
    </div>
    <div>
        <input type="radio" value="15000" name="markuptype" class="pack_radio"><h4>
            W3C Valid XHTML 1.0 Strict</h4>
        <span class="pack_price">15,000</span>
    </div>
</body>

<script type="text/javascript">

    $(function()
    {

        $('input:radio').change(function()
        {
            var total = 50000;        
            $('input:radio:checked').each(function()
            {
                if (isNaN(this.value))
                    total = total;
                else
                    total += parseFloat(this.value);
            });

            $('.price_amount').text(total);
        });
    });

</script>

</html>

Upvotes: 0

xtofl
xtofl

Reputation: 41509

The problem seems, to me, that the total var is declared out of the scope of the change callback. This will cause the closure of the change callback to contain the total variable, so it's value will be persisted across subsequent change calls.

If declare the total within this callback, you should be fine:

$("input[type=radio]").change(function(){
    var total = 5000; // => declared locally, so initialized at each change.
    $("input[type=radio]:checked").each(function(){
        if (isNaN($(this).val())) {
            total = total;
        }
        else 
            total += parseFloat($(this).val());
    });
    $(".price_amount").text(total);
});

Upvotes: 1

Quentin
Quentin

Reputation: 943108

I wrote a simple example demonstrating this recently (although I did it without using jQuery).

Just store the value you add, and then subtract it from the total before adding a new one.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Radio Test</title>
</head>
<body>
    <form action="" method="get" id="myForm">
        <fieldset id="myRadioGroup">
            <legend>Radios</legend>
            <div>
                <label> <input type="radio" value="0" name="add" checked> 0 </label>
            </div>
            <div>
                <label> <input type="radio" value="20" name="add"> 20 </label>
            </div>
            <div>
                <label> <input type="radio" value="30" name="add"> 30 </label>
            </div>

        </fieldset>
        <div id="total">45</div>
    </form>

    <script type="text/javascript">
        (function () {
            var group = document.forms.myForm.elements.add;
            var currentValue = function currentValue () {
                for (var i = 0, j = group.length; i < j; i++) {
                    if (group[i].checked) {
                        return Number(group[i].value);
                    }
                }
            };
            var oldValue = currentValue();
            var total = document.getElementById('total').firstChild;

            var update = function update () {
                var current = currentValue();
                total.data = Number(total.data) - oldValue + current;
                oldValue = current;
            };

            for (var i = 0, j = group.length; i < j; i++) {
                group[i].onchange = update;
            }
        }());
    </script>
</body>
</html>

Upvotes: 0

Related Questions