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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
1392
52
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
The difference in console.log output result: Why are the two calls different?
Apr 04, 2025 pm 05:12 PM
In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
Is JavaScript hard to learn?
Apr 03, 2025 am 12:20 AM
Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.
How to implement panel drag and drop adjustment function similar to VSCode in front-end development?
Apr 04, 2025 pm 02:06 PM
Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...
