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

【问题标题】：How might I calculate the sum of radio button values using jQuery?如何使用 jQuery 计算单选按钮值的总和？
【发布时间】：2010-11-22 10:06:33
【问题描述】：

我正在尝试创建一个包含许多单选按钮的多个组的表单。当用户选择一个按钮时，我想计算每个选定单选按钮值的总和并将这个总和显示给用户。

我找到了一个用于计算的 jQuery 插件，这个插件使用按钮的名称属性来计算。例如，它将所有名称为sum 的按钮的值相加。

到目前为止，我已经尝试了两种设置方法：在第一种方法中，我为每个组创建一个隐藏字段来保存其中所选值的总和，这个隐藏字段获取值但问题是当用户选择一个按钮时，总值不会更新。我的代码如下所示：

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

在此代码中，名称为totalSum 的输入标记是值将更新的位置，但在更改按钮时不会更新。

正如我之前所说，我使用隐藏字段的原因是为了保存每个组的小计。它的名称为sum，向插件表明它应该添加到其他人。

我不知道这是否是正确的方法，当用户单击按钮时，我尝试将按钮的名称属性更改为sum，但这也不起作用！

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

我该怎么做？

【问题讨论】：

标签： javascript jquery html radio-button

【解决方案1】：

无标题文档

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

上面的代码将对两组检查的值进行动态求和。 parseInt 将转换为整数。否则使用 parseFloat。

【讨论】：

【解决方案2】：

插件 schmugin。摆脱您的 onclick 并尝试以下操作：

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

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

【讨论】：

+1。这就是为什么在学习框架之前学习语言的基本基础很重要的原因。完全没有理由将插件带入这个特定问题。
如何在$("input[type=radio]").click(function() { 中指定一个表单名称，以便它只使用特定表单中的单选按钮而不是页面上的所有单选按钮？