Yogesh Chauhan's Blog

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

You can use any method for accessing elements in the DOM.

Set the checked property:


radioId.checked = true
//or
radioId.checked = false

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;
}


Use 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);
};

amazon

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 add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
How to overwrite file contents with new content in PHP?PHPCREATE DATABASE in PostgreSQLPostgresIs monitoring an employee’s work on a computer a desirable or undesirable activity?MiscellaneousConfiguring Modules with @forward rule in SCSS (Sass)SCSSHow SCSS (Sass) finds a module without a file extension?SCSSNew to  Drupal? Here’s What You Need to KnowDrupal