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

发布于 2024-08-03 17:48:39 字数 1253 浏览 3 评论 0原文

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

$(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将添加到总价中，我只想拥有其中一个！

原文

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 !

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笔落惊风雨 2024-08-10 17:48:39

在我看来，问题似乎是 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);
});

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

回复收藏 0 原文

哑剧 2024-08-10 17:48:39

我最近写了一个简单的例子来演示这一点（尽管我没有使用 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>

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>

回复收藏 0 原文

┈┾☆殇 2024-08-10 17:48:39

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

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

~没有更多了~