How to check if a radio button is selected using JavaScript?
In HTML, Radio choice buttons allow developers to create multiple options for a selection. The user can select any option and we can get its value and know which option the user selected among multiple options.
Therefore, it is important to check which radio button the user selected to understand their choice from multiple options. Let us understand it through real life examples. When you fill any form and ask to choose gender, you can see they give you three options and you can choose only one.
In this tutorial, we will learn two ways to check if a radio button is selected using JavaScript.
Use the checked attribute of the radio button
We can access the radio element in JavaScript using various methods. After that we can check if the selected radio button is checked or not using its checked property. If the value of the checked attribute is true, it means that the radio button is selected; otherwise, it is not selected.
grammar
Users can check whether the radio button is checked using the checked attribute of the radio element according to the following syntax.
<input type = "radio" name = "radio" value = "male" id = "radio1" > Male</input>
<script>
let radio1 = document.getElementById('radio1');
if(radio1.checked){
// radio1 is checked
}
</script>
In the above syntax, we access the radio button using its id and use the checked attribute to check if the radio button is selected in the if statement.
Example
In the example below, we have created three radio buttons containing different values, such as male, female, etc. In JavaScript, we access each radio button by its ID and check the value of each radio button's "checked" attribute.
When the user selects any radio button and clicks on it, they will see a message showing the value of the selected radio button.
<html>
<body>
<h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected.</h3>
<input type = "radio" name = "radio" value = "male" id = "radio1" > Male </input> <br>
<input type = "radio" name = "radio" value = "female" id = "radio2" > Female </input><br>
<input type = "radio" name = "radio" value = "other" id = "radio3" /> Other </input>
<p id = "output"> </p>
<button onclick = "checkRadio()"> Check radio </button>
<script>
let output = document.getElementById("output");
function checkRadio(){
// accessing the radio buttons
let radio1 = document.getElementById('radio1');
let radio2 = document.getElementById('radio2');
let radio3 = document.getElementById('radio3');
// checking if any radio button is selected
if(radio1.checked){
output.innerHTML = "The radio button with value " + radio1.value + " is checked!";
}
if(radio2.checked){
output.innerHTML = "The radio button with value " + radio2.value + " is checked!";
}
if(radio3.checked){
output.innerHTML = "The radio button with value " + radio3.value + " is checked!";
}
}
</script>
</body>
</html>
Example
The example below is almost the same as the one above, except that we access all the radio buttons at once using their names. The getElementByName() method returns all radio elements named radio.
After that, we use a for-of loop to loop through the radio button array and check if each radio button is checked using the "checked" attribute.
<html>
<body>
<h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected</h3>
<input type = "radio" name = "radio" value = "10" id = "radio1"> 10 </input> <br>
<input type = "radio" name = "radio" value = "20" id = "radio2"> 20 </input> <br>
<input type = "radio" name = "radio" value = "30" id = "radio3" /> 30 </input>
<p id = "output"> </p>
<button onclick = "getSelectedRadio()"> Check radio </button>
<script>
let output = document.getElementById("output");
function getSelectedRadio() {
let radioButtons = document.getElementsByName('radio');
for (let radio of radioButtons) {
if (radio.checked) {
output.innerHTML = "The radio button is selected and it's value is " + radio.value;
}
}
}
</script>
</body>
</html>
Use querySelector() method to check whether the radio button is selected
Programmers can use JavaScript's querySelector() method to select any HTML element. Here we use querySelector() method to select only the selected radio buttons. If the radio button is not selected, a null value is returned.
grammar
Users can use the querySelector() method according to the following syntax to check whether the radio button is selected.
var selected = document.querySelector('input[name="year"]:checked');
In the above syntax, "year" is the name of the radio button group, and it returns any radio button that belongs to the "year" group and is selected.
Example
In the example below, we have created three radio buttons to provide the user with three different choices. When the user clicks the "Check Selected Year" button, it calls the getSelectedRadio() function, which selects the radio button named "year" using the querySelector() method and checks it from the DOM.
The user can click the button and observe the output without selecting any radio button.
<html>
<body>
<h3>Using the <i> querySelector() method </i> to check whether a radio button is selected.</h3>
<input type = "radio" name = "year" value = "1999" id = "radio1"> 1999 </input><br>
<input type = "radio" name = "year" value = "2021" id = "radio2"> 2021 </input><br>
<input type = "radio" name = "year" value = "2001" id = "radio3" /> 2001 </input>
<p id="output"></p>
<button onclick="getSelectedRadio()">Check selected year</button>
<script>
let output = document.getElementById("output");
function getSelectedRadio() {
var selected = document.querySelector(
'input[name="year"]:checked');
if (selected) {
output.innerHTML += "Radio button is selected."
} else {
output.innerHTML += "Not any radio button is selected!"
}
}
</script>
</body>
</html>
Users learned two different ways to get the selected radio button using JavaScript. The best way is to use querySelector() method as we only need to write one line of code.
The above is the detailed content of How to check if a radio button is selected using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Replace String Characters in JavaScript
Mar 11, 2025 am 12:07 AM
Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
Custom Google Search API Setup Tutorial
Mar 04, 2025 am 01:06 AM
This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y
Build Your Own AJAX Web Applications
Mar 09, 2025 am 12:11 AM
So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J
Example Colors JSON File
Mar 03, 2025 am 12:35 AM
This article series was rewritten in mid 2017 with up-to-date information and fresh examples. In this JSON example, we will look at how we can store simple values in a file using JSON format. Using the key-value pair notation, we can store any kind
8 Stunning jQuery Page Layout Plugins
Mar 06, 2025 am 12:48 AM
Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation
What is 'this' in JavaScript?
Mar 04, 2025 am 01:15 AM
Core points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was
Improve Your jQuery Knowledge with the Source Viewer
Mar 05, 2025 am 12:54 AM
jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI
10 Mobile Cheat Sheets for Mobile Development
Mar 05, 2025 am 12:43 AM
This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig
