选择单选按钮后如何根据所选的单选按钮显示输出？ [英] How to display an output depending on the selected radio button after selecting a radio button?

问题描述

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

How to display something on <div> or <label> after selecting a specific radio button, for example is I have a group of radio button

Interest Value
o 3%
o 5%
o 7%

Amount: 1,450.00

金额的值将更改取决于所选的单选按钮。什么是在javascript上执行此操作的正确方法（没有jquery）？什么是最好的DOM事件？

The value of the amount will change depending on the selected radio button. What is the correct method to do this on javascript (without jquery)? What is the best DOM event to use on it?

推荐答案

您可以只听其click事件。

You can just listen to its click event.

请参见代码此处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>

这篇关于选择单选按钮后如何根据所选的单选按钮显示输出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！