September 17, 2021

How to Get Value from Radio Button in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this video tutorial, you will learn how to get value from radio button in javascript. If you are having radio buttons in your HTML file, then it is obvious you want to get the value of the selected radio button and do something with it.

As you already know, in a particular group of radio buttons, you can only select one radio button. A good example of using a radio button would be in a signup form where a user can select the gender.

In the following example, we have multiple radio buttons. I will select one radio button randomly and upon click of a button, I will display its value or label text on the screen. Please have a look over the code example and steps given below.

HTML & CSS

We have a few elements in the HTML file and that includes div, label, button, and h1.
The div element is just a wrapper for the rest of the elements.
We have created multiple radio buttons using the input element.
The inner text for the button element is “Show” and for the h1 element is “Result”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <label><input type="radio" name="username" value="peter">Peter</label>
        <label><input type="radio" name="username" value="marks">Marks</label>
        <label><input type="radio" name="username" value="james">James</label>
        <label><input type="radio" name="username" value="mary">Mary</label>
        <button>Show</button>
        <h1>Result</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

.container {
    display: inline-block;
}

button {
    display: block;
    margin: 20px auto;
}

Javascript

We have selected button element and h1 element using document.querySelector() and stored them in btnShow and result variables respectively.
We have attached the click event to the button element.
We are using CSS selector input[type="radio"]:checked to get selected radio button and storing it in selected variable.
As you can see each input element is wrapped with a label element. That means the label element is the parent of the input element. In javascript, each element has parentElement property which we can use to get the parent element. Similarly, we can get text content using the textContent property. We are using both of them to get the label text of the selected radio button.
You can also get the value of the selected radio button by using the value property.

let btnShow = document.querySelector('button');
let result = document.querySelector('h1');

btnShow.addEventListener('click', () =>{
    let selected = document.querySelector('input[type="radio"]:checked');
    result.innerText = selected.parentElement.textContent;
});

You May Also Like: