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

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
What is the difference between float and double?MiscellaneousHow to get Current Hour, Minute and Second in JavaScript?JavaScriptKubernetes vs. Docker? It’s a misleading phraseMiscellaneousadd_filter function in WordPressWordPressUnary Operators in JavaScriptJavaScriptPagination in CSS with multiple examplesCSS