Event Handler for Radio Button Input Type

Hi guys, Today I am back with another tutorial regarding event handler for Radio Button. In usual case with all input types you can perform some functionality based on changes made in input value using onchange¬†function but in radio button it won’t work.

For an example

/**
 * CodeZone.in
 * Author: Dineshkumar
 * Contact : hi@codezone.in
 */
<input type="radio" name="myRadios" onchange="handleChange();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange();" value="2" />

In above case onchange function won’t work. So in that case we use onclick¬†to handle this event. Below is an working example to handle event

/**
 * CodeZone.in
 * Author: Dineshkumar
 * Contact : hi@codezone.in
 */
 <input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
 <input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

In above case this parameter is used to pass which value is send to handler function. For an example below java script function can be used to handle this to display which value is selected.

/**
 * CodeZone.in
 * Author: Dineshkumar
 * Contact : hi@codezone.in
 */
 function handleClick(myRadio) {
    alert('Selected value: ' + myRadio.value);
}

In same way you can handle it based on your own logic.

Happy coding…

Leave a Reply