如何仅对单选按钮值求和一次？答案

【问题标题】：how to sum radio button values only one time?如何仅对单选按钮值求和一次？
【发布时间】：2009-09-01 21:54:42
【问题描述】：

我正在使用此代码对多个单选按钮的值求和：

$(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，我只想拥有其中一个！

【问题讨论】：

标签： javascript jquery radio-button

【解决方案1】：

在我看来，问题似乎是 total var 声明超出了 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);
});

【讨论】：

【解决方案2】：

我最近写了一个简单的例子来证明这一点（虽然我没有使用 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>

【讨论】：

【解决方案3】：

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

【讨论】：