我如何计算使用jQuery的单选按钮值的总和？ [英] How might I calculate the sum of radio button values using jQuery?
问题描述
我试图创建一个包含许多单选按钮的组。当用户选择一个按钮时，我想计算每个选定的单选按钮值的总和并将该总和显示给用户。
我找到了一个jQuery插件这将做计算，这个插件使用按钮的name属性来计算。例如，它会将名称为 sum 的所有按钮的值相加。
到目前为止，我尝试了两种方法来设置它：在第一种方法中，我为每个组创建一个隐藏字段，以便将所选值的总和保存在里面它，这个隐藏的字段获取值，但问题是，当用户选择一个按钮时，总值不会更新。我的代码如下所示：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // EN http://www.w3.org/TR/html4/strict.dtd\">
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-1>
< title>无标题文档< / title>
< script src =jquery.jstype =text / javascript>
< / script>
< script src =calc.jstype =text / javascript>
< / script>
< script src =calc_f.jstype =text / javascript>
< / script>
< script type =text / javascript>
函数DisplayPrice（price）{
$（'＃spn_Price'）。val（price）;
}
< / script>
< / head>
< body>
< form id =form1runat =server>
< input type =hiddenid =spn_Pricename =sumvalue =>
< br>
< input id =rdo_1type =radiovalue =159name =priceonclick =DisplayPrice（this.value）;>
< br>
< input id =rdo_2type =radiovalue =259name =priceonclick =DisplayPrice（this.value）;>
< br>
< input type =textname =totalSumid =totalSumvalue =size =2readonly =readonly>
< / form>
< / body>
< / html>
在此代码中，名称为 totalSum 是值更新的位置，但是它在更改按钮时不会更新。
正如我之前所说的，我使用隐藏字段的原因是掌握每个小组的小计。它的名称为 sum ，它指示插件应该将其添加到其他人。
我不知道如果这是做到这一点的正确方法，那么当用户点击 sum 时，我试图改变按钮的name属性，但那也没用！ p>
这里是插件地址： http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm
我该怎么做？
p>插件schmugin。摆脱你的onclick并试试这个：
$（input [type = radio]）。click（function（） {
var total = 0;
$（input [type = radio]：checked）。 ））;
}）;
$（＃totalSum）。val（total）;
}）;
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. 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>
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.
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.
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!
Here is plugin address : http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm
How can I do this ?
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);
});
这篇关于我如何计算使用jQuery的单选按钮值的总和？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
