javascript - 选择单选按钮后如何根据所选单选按钮显示输出？

Question

如何在 <div> 上显示内容或 <label>选择特定的单选按钮后，例如我有一组单选按钮

Interest Value
o 3%
o 5%
o 7%

Amount: 1,450.00

金额的值将根据所选的单选按钮而变化。在 javascript(没有 jquery)上执行此操作的正确方法是什么？最好的 DOM 事件是什么？

Answer 1

你可以只监听它的点击事件。

查看代码here on jsfiddle无耻地复制自 OnChange event handler for radio button (INPUT type="radio") doesn't work as one value

<form name="myForm">
    <input type="radio" name="myRadios"  value="3" >3%</value>
    <input type="radio" name="myRadios"  value="5" >5%</value>
    <input type="radio" name="myRadios"  value="7" >7%</value>
</form>
Amount: <span id="amount"></span>

<script>
var amountField = document.getElementById('amount');
var rad = document.myForm.myRadios;
var prev = null;
for(var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
        console.log(this.value);
        if(this !== prev) {
            prev = this;
            amountField.textContent = 1000+1000*this.value/100;
        }
    };
}
</script>