Different ways to get radio button selected value in javascript and JQuery

This tutorial shows multiple ways to get selected values from a radio button in HTML and CSS.

The radio button is a UI element uses on Forms to select one value from a list of buttons.

It is one way to display the data in the button to get one value from multiple values.

Let’s create a radio button in HTML.

A radio button is created using an input tag with type=radio. Created three buttons, with the same name and gender The value of each radio button is different.

The html Button is shown using the input tag with type=“button”. Click event handler is attached with a javascript function.

<!DOCTYPE html>
<html>

<head>
  <title>Radio Button  demo</title>
</head>

<body>
  <label for="gender">Gender: </label>
  <input type="radio" name="gender" value="male" checked="checked">Male</input>
  <input type="radio" name="gender" value="female">Female</input>
  <input type="radio" name="gender" value="both">Both</input>
  <input type="submit" value="submit" onclick="submitData()">
</body>

</html>

Here is a function code for the `submit button onClick event

function submitData() {
  console.log("Submit function");
}

Let’s see how to get the selected radio button value with submit button click.

How to get selected radio button value in HTML using javascript?

Javascript provides DOM API to get UI element values using selectors.

use document query selector

document.querySelector() returns matched element based on selector. null returned if no match was found.

Syntax:

document.querySelector(selector).

the selector can be an element id or class selector.

First, select the radio button using selector, Selected is used as input[name=" gender"] and it returns three radio buttons.

use : checked pseudo selector to select the selected radio button.

Here is a javascript code example

function submitData() {
  let value = document.querySelector('input[name="gender"]:checked').value;
  let value = document.querySelector('input[name="gender"]:checked').value;

  console.log(value);
}

using getElementsByName function

getElementsByName() function returns the element using name selector.

It returns an array of elements.

Iterates the array and check element is selected using .checked property.

Here is an example code.

function submitData() {
  var genders = document.getElementsByName("gender");
  for (var i = 0, length = genders.length; i < length; i++) {
    if (genders[i].checked) {
      console.log(genders[i].value);
      break;
    }
  }
}

using Id selector

HTML radio element added with same or different id tag. you can use getElementById API to retrieve the selected value .

document.getElementById(“malegender”).checked returns boolean value true or false.

  <label for="gender">Gender: </label>
  <input type="radio" id="malegender" name="gender" value="male" checked="checked">Male</input>
  <input type="radio" id="femalegender" name="gender" value="female">Female</input>
  <input type="radio"  id="bothgender"name="gender" value="both">Both</input>
  <input type="submit"  value="submit" onclick="submitData()">

If the male radio button is selected, It returns following

function submitData() {
  console.log(document.getElementById("malegender").checked); // true
  console.log(document.getElementById("femalegender").checked); // false
  console.log(document.getElementById("bothgender").checked); // false
}

Jquery to get the selected radio button value

JQuery is a javascript library and if you are using it in your project, You can get a radio button using jquery selector syntax.

There are multiple ways we can get HTML radio selected value in jquery.

use the element selector

$('input[name="gender"]:checked').val();

if you are using the same id for all radio buttons, you can use the below code

$("#gender:checked").val();

using the ID selector If it is assigned uniquely to each radio button as given below

  <input type="radio" id="malegender" name="gender" value="male" checked="checked">Male</input>
  <input type="radio" id="femalegender" name="gender" value="female">Female</input>
  <input type="radio"  id="bothgender"name="gender" value="both">Both</input>4

You can get using the id

$("#malegender:checked").val();
$("#femalegender:checked").val();
$("#bothgender:checked").val();

Conclusion

To Summarize, Show multiple ways to retrieve selected radio button values in javascript and JQuery with examples.