YogeshChauhan . com

How to check if radio button is checked or not using JavaScript?

in JavaScript on June 17, 2020

There are few different ways we can check that based on you have a single radio button or multiple.

Input Radio checked Property

The checked property sets or returns the checked state of a radio button.

This property reflects the HTML checked attribute.

It is supported in all major browsers.

Syntax


radioId.checked

// not necessarily only Id though

Set the checked property:


radioId.checked = true or false (default is false)

// not necessarily only Id though

Where true| or false specifies whether a radio button should be checked or not. true means the radio button is checked and false means the radio button is not checked.

Examples

Find out if a radio button is checked or not:


var x = document.getElementById("testRadioButton").checked;

What to do when you have more than one radio buttons?

Use a for loop to go through each one of them and find out which one is checked


<!-- HTML --> 

<form action="/action_page.php">
  <input type="radio" name="coffee" value="cream">With cream<br>
  <input type="radio" name="coffee" value="sugar">With sugar<br>
  <br>
  <input type="button" onclick="myFunction()" value="Send order">
  <br><br>
  <input type="text" id="order" size="50">
  <input type="submit" value="Submit">
</form>

//JS

function myFunction() {
  var coffee = document.forms[0];
  var txt = "";
  var i;
  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt = txt + coffee[i].value + " ";
    }
  }
  document.getElementById("order").value = "You ordered a coffee with: " + txt;
}

One more for loop example for multiple radio buttons


<!-- HTML -->

<form>
  <input type="radio" name="coffee" value="cream">With cream<br> 
  <input type="radio" name="coffee" value="sugar">With sugar<br>
  <input type="button" id="btn" value="Show User Preferences">
</form>

// JS

const btn = document.querySelector("#btn");

btn.onclick = function () {
  const selections = document.querySelectorAll('input[name="coffee"]');
  let userSelection;
  for (const selection of selections) {
    if (selection.checked) {
      userSelection = selection.value;
      break;
    }
  }
  console.log(userSelection);
};
dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

Forcing the domain to serve securely using HTTPSMiscSolution for the error Commit failed – exit code 1 received in Desktop GithubMisc2 Ways We Can Write Multiple Line Commands in PHPPHPEXISTS and NOT EXISTS in PostgresPostgresasync function in JavaScriptJavaScriptHow to import MySQL small sample database into phpMySQL?SQL/MySQL