从单选按钮到 int 的值并计算
Posted
技术标签:
【中文标题】从单选按钮到 int 的值并计算【英文标题】：Value from radio button to int and calculate 【发布时间】：2018-11-21 01:19:40 【问题描述】：我刚开始编程，所以答案可能很明显。我的代码有一个单选按钮（服务价格）和一个下拉菜单（订单数量），我想用这些值进行计算。到目前为止一切顺利，我花了将近一天的时间才得到这个简短的代码。
我现在的问题是，我需要实时显示结果，可能在像
这样的输入标签中 <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" /></p>
也许还有更好的方法？ 因此，应始终选中两个单选按钮之一并显示其价格。当用户从下拉菜单中选择数量时，结果应该会自动刷新。 谁能帮我？
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<label>ABC
<input class="test" type="radio" checked="checked" name="test" value="500">
</label>
<label>DEF
<input class="test" type="radio" name="test" value="800">
</label>
<select size="1" name="dropdown" onchange='calculate(this.value);'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" /></p>
</body>
感谢您的帮助！
edit：好的，即使计算是错误的。我想获取选中的单选按钮的值并将其转换为 int。在此之后，我需要将 int 与复选框中的值相乘。我不知道我错过了什么，但它总是用第一个单选按钮值计算，即使我检查第二个。
<script>
var x = $('input[name="test"]:checked').val();
var xInt = parseInt(x, 10);
function calculate (val)
var result = val * xInt ;
var amountPrint = document.getElementById('amount');
amountPrint.value = result;
$(".test").click(function(event)
var total = 0;
$(".test:checked").each(function()
total += parseInt($(this).val());
);
if (total == 0)
$('#amount').val('');
else
$('#amount').val(total);
);
</script>
我仍然遇到问题，我需要实时显示结果，具体取决于选中的单选按钮和下拉值。所以我在单选按钮中添加了一个类“测试”并添加了上述功能。现在我得到了实时的结果，这取决于选中的单选按钮，但计算仍然是错误的，我需要以某种方式组合它。
【问题讨论】：
【参考方案1】：<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<label>ABC
<input type="radio" checked="checked" name="test" value="500">
</label>
<label>DEF
<input type="radio" name="test" value="800">
</label>
<select size="1" name="dropdown" onchange='calculate(this.value);'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>
</body>
<script>
var x = $('input[name="test"]:checked').val();
var xInt = parseInt(x, 10);
function calculate (val)
var result = val * xInt ;
var amountPrint = document.getElementById('amount');
amountPrint.value = result;
</script>
您只需将一个新值推送到金额区域。
我所做的只是将 value="" 添加到 Amount 输入，可以跳过，但这是 IMO 的好习惯。
然后在js下面。通过您之前提供的 id 获取元素。
然后使用您的计算，并告诉它更改 id 'amount' 的值
例如，您也可以添加<p id='printResultsHere'></p> 并以几乎相同的方式调用。
我希望这会有所帮助。如果是，请将答案标记为已接受。
【讨论】：
感谢您的帮助。它让我更进一步，但我仍然错过了一些东西。我不知道为什么，但我的计算得到了错误的结果，显然我写问题时太累了。我需要始终显示结果，具体取决于选中的单选按钮。现在它只是显示，当我操作下拉菜单时。并且错误计算的问题仍然存在，它仅使用第一个单选按钮值（“500”）进行计算。我将编辑我的问题.... 当在单选按钮中检测到更改时，您需要再次运行代码。【参考方案2】：根据上面的 cmets
要将字符串转换为 int，请使用 parseInt() 来检测您需要检测到单选按钮的更改。现在您可以手动将onChange = 或onClick = 添加到所有这些。有两个为什么不，但如果你打算拥有更多，他们都会改变结果。你可以遍历它们。
将此添加到代码底部
//Loop through the radio buttons, first find all the elements with that Name then you can
//loop through to to detect the onClick.
var radios = document.getElementsByName('test')
for (var i = 0, max = radios.length; i < max; i++)
radios[i].onclick = function ()
console.log(parseInt(this.value));
您可能需要稍微不同地重写代码，因为您在代码中处理两个变量，但您的函数只接受一个。
所以为了避免做另一个循环，更容易给它一个 ID 并继续前进。因此，现在每次您更改复选框时，它都会使用下拉列表中的当前值重新运行代码。
下面做我认为你想要的。
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<label>ABC
<input type="radio" checked="checked" name="test" value="500">
</label>
<label>DEF
<input type="radio" name="test" value="800">
</label>
<select size="1" id='dropdown' name="dropdown" onchange='calculate(this.value);'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>
</body>
<script>
var x = $('input[name="test"]:checked').val();
var xInt = parseInt(x, 10);
//Get the input Box you want to print to
var amountPrint = document.getElementById('amount');
//All the radio boxes which you named test
var radios = document.getElementsByName('test')
function calculate(val)
var result = val * xInt;
//var amountPrint = document.getElementById('amount');
amountPrint.value = result;
var radios = document.getElementsByName('test')
for (var i = 0, max = radios.length; i < max; i++)
radios[i].onclick = function ()
xInt = parseInt(this.value, 10)
calculate(document.getElementById('dropdown').value)
</script>
【讨论】：
以上是关于从单选按钮到 int 的值并计算的主要内容，如果未能解决你的问题，请参考以下文章