ansaurus

Question

how to sum radio button values only one time ?

Answer 1

A:

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>

David Dorward 2009-09-01 11:30:27

Answer 2

+1 A:

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

xtofl 2009-09-01 11:34:44

Many Thanks for your help :)

Datis 2009-09-01 11:49:04

Answer 3

A:

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

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

</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>

Raghav Khunger 2009-09-01 13:54:42

ansaurus

tags:

views:

answers:

how to sum radio button values only one time ?

related questions