Handline radio buttons in JavaScript

By: aathishankaran in JavaScript Tutorials on 2007-03-27

To handle radio buttons in JavaScript, you can use the checked property of the radio button element to determine if it is selected. Here's an example:

HTML code:

<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>

<button onclick="getSelectedGender()">Get selected gender</button>

JavaScript code:

function getSelectedGender() {
  const maleRadioButton = document.getElementById("male");
  const femaleRadioButton = document.getElementById("female");

  if (maleRadioButton.checked) {
    console.log("Male is selected");
  } else if (femaleRadioButton.checked) {
    console.log("Female is selected");
  } else {
    console.log("No gender selected");
  }
}

In this example, we have two radio buttons with the same name attribute, which means they belong to the same radio button group. The id attribute is used to identify each radio button element.

When the user clicks the "Get selected gender" button, the getSelectedGender() function is called. This function gets a reference to each radio button element using their id attributes, and then checks if the checked property is true. If the checked property is true for the male radio button, then the console will log "Male is selected". If the checked property is true for the female radio button, then the console will log "Female is selected". If neither radio button is selected, then the console will log "No gender selected".

Previous
<< Custom Password Object in JavaScript

Next
Handling Select options in JavaScript >>