javascript - 我有两个单选按钮，但即使我们选择不同的单选按钮，表单也只能获取一个单选按钮值

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

您可以使用名称而不是 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));
});

这是working example在 JSFiddle 上。

希望有帮助。

编辑不要忘记在 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>