{

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 gender The value of each radio button is different.

Html Button is shown using 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 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 found.

Syntax:

document.querySelector(selector).

the selector can be an element id or class selector.

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

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

Here is an 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 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 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 same id for all radio buttons, you can use below code

$("#gender:checked").val();
  • using the ID selector If id is assigned unique 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 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.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.