如何使用jQuery计算单选按钮值的总和？

Question

I am trying to create a form with many groups containing many radio buttons. 我正在尝试创建一个包含许多单选按钮的组的表单。 When the user selects a button, I would like to calculate the sum of each selected radio button value and show this sum to the user. 当用户选择按钮时，我想计算每个所选单选按钮值的总和并向用户显示该总和。

I have found a plugin for jQuery which will do the calculation, this plugin use the name attribute of the buttons to calculate. 我找到了一个jQuery的插件，它将进行计算，这个插件使用按钮的name属性来计算。 For example, it will sum the values of all buttons which have the name sum . 例如，它将对具有名称sum的所有按钮的值sum 。

So far, I have tried two ways of setting this up: in the first method, I create a hidden field for each group to hold the sum of the selected values inside it, this hidden field gets the value but the problem is that the total value will not update when a user selects a button. 到目前为止，我已经尝试了两种设置方法：在第一种方法中，我为每个组创建一个隐藏字段以保存其中所选值的总和，这个隐藏字段获取值但问题是总数当用户选择按钮时，值不会更新。 My code looks like this: 我的代码看起来像这样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="jquery.js" type="text/javascript">
        </script>
        <script src="calc.js" type="text/javascript">
        </script>
        <script src="calc_f.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            function DisplayPrice(price){
                $('#spn_Price').val(price);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="hidden" id="spn_Price" name="sum" value="">
            <br>
            <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">
            <br>
            <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">
            <br>
            <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
        </form>
    </body>
</html>

In this code, the input tag with the name totalSum is where the value will update, but it won't update when changing the buttons. 在此代码中，名称为totalSum的输入标记是值将更新的位置，但在更改按钮时不会更新。

As I said before, the reason why I use a hidden field is to hold each group's subtotal. 正如我之前所说，我使用隐藏字段的原因是保存每个组的小计。 It has the name sum , which indicates to the plugin that it should be added to others. 它具有名称sum ，它向插件指示应将其添加到其他人。

I dont know if this is the right way to do this, i have tried to change the name attribute of the buttons when user click them to sum but that didn`t work either! 我不知道这是否是正确的方法，我试图改变按钮的名称属性，当用户点击它们sum但这也不起作用！

Here is plugin address : http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm 这是插件地址： http ： //www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

How can I do this ? 我怎样才能做到这一点？

Answer 1

Plugin schmugin. 插件schmugin。 Get rid of your onclick and try this: 摆脱你的onclick并试试这个：

$("input[type=radio]").click(function() {
    var total = 0;
    $("input[type=radio]:checked").each(function() {
        total += parseFloat($(this).val());
    });

    $("#totalSum").val(total);
});

Answer 2

Untitled Document 无标题文档

    <script type="text/javascript">
        function DisplayPrice(price){
            var val1 = 0;
            for( i = 0; i < document.form1.price.length; i++ ){
                if( document.form1.price[i].checked == true ){
                    val1 = document.form1.price[i].value;
                }
            }

            var val2 = 0;
            for( i = 0; i < document.form2.price2.length; i++ ){
                if( document.form2.price2[i].checked == true ){
                    val2 = document.form2.price2[i].value;
                }
            }

            var sum=parseInt(val1) + parseInt(val2);
            document.getElementById('totalSum').value=sum;
        }
    </script>
</head>
<body>
    Choose a number:<br>
    <form name="form1" id="form1" runat="server">
        <br>
        <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159
        <br>
        <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259
        <br>
    </form>

    Choose another number:<br>
    <form name="form2" id="form2" runat="server">
        <br>
        <input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345
        <br>
        <input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87
        <br>
    </form>
    <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">


</body>

The code above will dinamically sum the checked values from both groups. 上面的代码将对两组中的检查值进行二进制求和。 parseInt will convert to integers. parseInt将转换为整数。 Use parseFloat otherwise. 否则请使用parseFloat。

如何使用jQuery计算单选按钮值的总和？

问题描述

2 个解决方案

解决方案1
21 已采纳 2009-08-24 21:03:38

解决方案2
2

如何使用jQuery计算单选按钮值的总和？

问题描述

2 个解决方案

解决方案1 21 已采纳 2009-08-24 21:03:38

解决方案2 2

解决方案1
21 已采纳 2009-08-24 21:03:38

解决方案2
2