我对此很陌生，所以我一直在尝试改编其他人的代码来满足我的需求，我需要将第一个名称组中的单选选项添加到第二个名称组中，然后显示在文本框中底部。
底部文本框中没有显示任何内容。我哪里出错了？
Javascript:
$("input[type=radio]").click(function()
{
var total = 0;
$("input[type=radio]:checked").each(function()
{
total += parseFloat($(this).val());
});
$("#totalSum").val(total);
});
HTML:
<strong>Choose a base package:</strong>
<input id="item_0" type="radio" name="pkg" value="1942" />Base Package 1 - $1942
<input id="item_1" type="radio" name="pkg" value="2313" />Base Package 2 - $2313
<input id="item_2" type="radio" name="pkg" value="2829" />Base Package 3 - $2829
<strong>Choose an add on:</strong>
<input id="item_10" type="radio" name="ext" value="0" />No add-on - +$0
<input id="item_12" type="radio" name="ext" value="2146" />Add-on 1 - (+$2146)
<input id="item_13" type="radio" name="ext" value="2455" />Add-on 2 - (+$2455)
<input id="item_14" type="radio" name="ext" value="2764" />Add-on 3 - (+$2764)
<input id="item_15" type="radio" name="ext" value="3073" />Add-on 4 - (+$3073)
<input id="item_16" type="radio" name="ext" value="3382" />Add-on 5 - (+$3382)
<input id="item_17" type="radio" name="ext" value="3691" />Add-on 6 - (+$3691)
<strong>Your total is:</strong>
<input id="totalSum" type="text" name="totalSum" readonly="readonly" size="5" value="" />
最佳答案
您的 JavaScript 在生成 HTML 之前执行，因此它不会“看到”未生成的 INPUT 元素。对于 jQuery，您可以将 Javascript 粘贴在 HTML 的末尾，也可以像这样包装它:
<script type="text/javascript">
$(function() { //jQuery trick to say after all the HTML is parsed.
$("input[type=radio]").click(function() {
var total = 0;
$("input[type=radio]:checked").each(function() {
total += parseFloat($(this).val());
});
$("#totalSum").val(total);
});
});
</script>
编辑:此代码对我有用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<strong>Choose a base package:</strong>
<input id="item_0" type="radio" name="pkg" value="1942" />Base Package 1 - $1942
<input id="item_1" type="radio" name="pkg" value="2313" />Base Package 2 - $2313
<input id="item_2" type="radio" name="pkg" value="2829" />Base Package 3 - $2829
<strong>Choose an add on:</strong>
<input id="item_10" type="radio" name="ext" value="0" />No add-on - +$0
<input id="item_12" type="radio" name="ext" value="2146" />Add-on 1 - (+$2146)
<input id="item_13" type="radio" name="ext" value="2455" />Add-on 2 - (+$2455)
<input id="item_14" type="radio" name="ext" value="2764" />Add-on 3 - (+$2764)
<input id="item_15" type="radio" name="ext" value="3073" />Add-on 4 - (+$3073)
<input id="item_16" type="radio" name="ext" value="3382" />Add-on 5 - (+$3382)
<input id="item_17" type="radio" name="ext" value="3691" />Add-on 6 - (+$3691)
<strong>Your total is:</strong>
<input id="totalSum" type="text" name="totalSum" readonly="readonly" size="5" value="" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$("input[type=radio]").click(function() {
var total = 0;
$("input[type=radio]:checked").each(function() {
total += parseFloat($(this).val());
});
$("#totalSum").val(total);
});
</script>
</body>
</html>
关于javascript - 对 radio 输入值求和，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20863842/