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

2022-01-21 00:00:00 radio-button jquery javascript html

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

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.

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

I have found a plugin for jQuery which will do the calculation, this plugin use the name attribute of the buttons to calculate. For example, it will sum the values of all buttons which have the name 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>

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

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.

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

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!

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

我该怎么做?

推荐答案

插件 schmugin.摆脱您的 onclick 并尝试以下操作:

Plugin schmugin. Get rid of your onclick and try this:

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

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

相关文章