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

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

This tutorial demonstrates various methods to obtain selected values from radio buttons in HTML and CSS.

Radio buttons are UI elements used in forms to enable users to select a single value from a list of options. They provide a straightforward means to collect data by allowing users to choose one option from multiple ones.

Let’s start by creating radio buttons in HTML.

A radio button is created using the <input> tag with type="radio". We’ll create three buttons with the same name attribute, representing gender. Each radio button will have a different value.

Additionally, we’ll add a button element for demonstration purposes. A click event handler will be attached to this button, calling a JavaScript function.

The HTML code for the radio buttons and click event handler.

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

In this setup, clicking the button will trigger the submitData() JavaScript function. We’ll implement this function to retrieve the selected value from the radio buttons.

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.