Как суммировать значения радиокнопок только один раз? - PullRequest
Новая
       11

Как суммировать значения радиокнопок только один раз?

0 голосов
/ 01 сентября 2009

Я использую этот код для суммирования значений из нескольких переключателей: 

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

проблема в том, что когда пользователь щелкает по радиокнопке в группе, а затем выбирает другую радиокнопку в этой группе, к этому добавляется новое значение, я хочу добавить только одно из значений к общему значению.

например в этой группе: 

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

когда пользователь в первый раз выберет вторичную радиостанцию, 5000 будет добавлен к общей цене, но если он поменяет ее на третий вариант, к общей сумме добавится 15000 + 5000, я хочу иметь только одну из них!

Ответы [ 3 ]

1 голос
/ 01 сентября 2009

Мне кажется, что проблема в том, что переменная total объявлена ​​вне контекста обратного вызова change. Это приведет к закрытию обратного вызова change, содержащего переменную total, поэтому его значение будет сохраняться при последующих вызовах change.

Если объявить total в этом обратном вызове, у вас все будет в порядке: 

$("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);
});
0 голосов
/ 01 сентября 2009 
<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>
0 голосов
/ 01 сентября 2009

Я недавно написал простой пример, демонстрирующий это (хотя я сделал это без использования jQuery).

Просто сохраните добавленное вами значение, а затем вычтите его из общей суммы перед добавлением нового. 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...