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

Posted 2023-05-08

【中文标题】选择单选按钮后如何根据所选单选按钮显示输出？

【英文标题】：How to display an output depending on the selected radio button after selecting a radio button?

【发布时间】：2015-11-26 08:25:14

【问题描述】：

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

Interest Value
o 3%
o 5%
o 7%

Amount: 1,450.00

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

【问题讨论】：

行为相同的类似问题：***.com/questions/8922002/…

【参考方案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>

【参考方案2】：

这取决于您希望何时获知该事件。

如果您想立即知道，请点击。 IE 在调用处理函数之前更新了检查的状态，我认为其他浏览器也是如此。您可能需要仔细检查这一事实。

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

礼貌：@lincolnk

链接：***