How To Display An Output Depending On The Selected Radio Button After Selecting A Radio Button?

How to display something on

or after selecting a specific radio button, for example is I have a group of radio button Interest Value o 3% o 5% o 7% Amoun

Solution 1:

You can just listen to its click event.

See the code here on jsfiddle shamlessly copied from OnChange event handler for radio button (INPUT type="radio") doesn't work as one value

<formname="myForm"><inputtype="radio"name="myRadios"value="3" >3%</value><inputtype="radio"name="myRadios"value="5" >5%</value><inputtype="radio"name="myRadios"value="7" >7%</value></form>
Amount: <spanid="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>

Solution 2:

It depends when you want to be informed of the event.

If you want to know immediately, go with click. IE updates the state of checked before the handler function is called, and I think the other browsers do as well. You may want to double check this fact.

If you only need to know before something else happens, you can use change. IE will not fire the change event until the selected radio button loses focus. FF/chrome/others may fire the event without focus changing, but I believe IE is actually doing it right in this case.

Courtesy : @lincolnk

link : Stackoverflow

Share