javascript - 我如何使用 jQuery 计算单选按钮值的总和?

标签 javascript jquery html radio-button

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

我找到了一个用于计算的 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

我该怎么做?

最佳答案

插件 schmugin。去掉你的 onclick 试试这个:

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

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

关于javascript - 我如何使用 jQuery 计算单选按钮值的总和?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1324703/

相关文章:

javascript - 如何: jQuery autocomplete for multiple valules with ";" semicolon separator support

javascript - jQuery 不适用于输入值

javascript - 缩进、 pretty-print 代码,包括 Django 模板标签、HTML、CSS 和 JavaScript

html - CSS:悬停特定元素时更改类 "x"的所有元素

html - CSS - 背景图像出现在我的机器上,但没有出现在我网站的托管版本上……为什么?

javascript - 如何使用 javascript 或 jquery 从 url 参数获取值

针对 Internet Explorer 的 Javascript 优化

javascript - Bootstrap轮播不滑动

Jquery无法在回调函数中访问$(this)

javascript - 默认的 JavaScript 字符编码是什么?