YogeshChauhan.com
How to check if radio button is checked or not using JavaScript?
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

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

SQL Inner JoinSQL/MySQLCREATE DATABASE in PostgreSQLPostgresJavaScript Number MethodsJavaScriptEverything you need to know about ANY, SOME and ALL Operators in PostgresPostgresWhat is PostgreSQL? How similar or different it is from SQL?PostgresWhat is a Strict Requirement in PHP 7 Function Declarations?PHP