Question

我想从单选按钮中获取值，然后我们选择使用grossSalary中的数字。结果将显示在名为epf的文本框中。发生错误，即使我们选择11％单选按钮，表单也只能得到0.09值。

这是我的javascript

<script> 
function get(percent)
{
var percent = document.getElementById('percent').value;
var grossSalary= document.getElementById('grossSalary').value;
var epf = parseFloat(percent)*parseFloat(grossSalary);
epf = epf.toFixed(2);
document.getElementById('epf').value = epf;
}
</script>

这是我的表格编码：

<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>

<div class="form-group">
<label>EPF</label>
<input type="radio" id="percent" name="percent" value="0.09" onclick="get(this.value)">9%
<input type="radio" id="percent" name="percent" value="0.11" onclick="get(this.value)">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
</form>

Answer 1

当你使用JS或Jquery时，总是要记住一个关键点：

id: used for single selection
class: used for multiple selection

在你的情况下，你对不同的标签使用相同的id，在这种情况下，它返回第一个匹配的html值。

所以要摆脱这个，你必须使用类并迭代它们并获得值。

Answer 2

您可以使用名称而不是ID（因为id必须是唯一的）。此外，使用jQuery，您可以使用change事件。

即。：

HTML：

<div class="form-group">
    <label>Gross Salary</label>
    <input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>

<div class="form-group">
    <label>EPF</label>
    <input type="radio" name="percent" value="0.09">9%
    <input type="radio" name="percent" value="0.11">11%
    <input type="text" id ="epf" class="form-control" name="epf" >
</div>

JS：

$("input[name=percent]").change(function() {
    var percent = $(this).val();
    var grossSalary= $("#grossSalary").val();
    var epf = parseFloat(percent)*parseFloat(grossSalary);
    $("#epf").val(epf.toFixed(2));
});

这是JSFiddle上的working example。

希望它有所帮助。

编辑不要忘记在您的html文件中包含jQuery源代码：

一个文件模板：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="form-group">
    <label>Gross Salary</label>
    <input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>

<div class="form-group">
    <label>EPF</label>
    <input type="radio" name="percent" value="0.09">9%
    <input type="radio" name="percent" value="0.11">11%
    <input type="text" id ="epf" class="form-control" name="epf" >
</div>

<script>
$("input[name=percent]").change(function() {
    var percent = $(this).val();
    var grossSalary= $("#grossSalary").val();
    var epf = parseFloat(percent)*parseFloat(grossSalary);
    $("#epf").val(epf.toFixed(2));
});
</script>

我有两个单选按钮，但即使我们选择不同的收音机，表格也只能获得一个收音机值

2 个答案: