在选择单选按钮后，如何根据所选的单选按钮显示输出

How to display an output depending on the selected radio button after selecting a radio button?

本文关键字：单选按钮 显示 输出 何根 选择      更新时间：2023-09-26

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

Interest Value
o 3%
o 5%
o 7%
Amount: 1,450.00

金额的值将根据所选的单选按钮而改变。什么是正确的方法来做到这一点在javascript(没有jquery)?在它上面使用什么是最好的DOM事件?

你可以只听它的click事件。

请参阅jsfiddle上无耻地从OnChange事件处理程序中复制的代码，用于单选按钮(INPUT type="radio")不能作为一个值

<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>

这取决于您希望何时收到事件通知。

如果你想立即知道，点击。IE在调用处理程序函数之前更新已检查的状态，我认为其他浏览器也这样做。你可能需要再检查一下这个事实。

如果你只需要在其他事情发生之前知道，你可以使用change。IE将不会触发更改事件，直到选定的单选按钮失去焦点。FF/chrome/其他可能会在没有焦点改变的情况下触发事件，但我相信IE在这种情况下实际上是正确的。

礼貌:@ lincolink

link: Stackoverflow

相关文章：