Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How can I know which radio button is selected via jQuery?
Use the jQuery val() method to get the value of the selected radio button. The :checked selector in combination with input:radio helps identify which radio button is currently selected in a group.
Example
You can try to run the following code to learn how to know which radio button is selected via jQuery ?
<html>
<head>
<title>jQuery Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$("#submit").click(function(e){
e.preventDefault();
var selectedValue = $('input:radio:checked').val();
if(selectedValue) {
alert("Selected value: " + selectedValue);
} else {
alert("No radio button selected");
}
});
});
</script>
</head>
<body>
<form id="myForm">
Select a number:<br>
<input type="radio" name="q1" value="1"> 1<br>
<input type="radio" name="q1" value="2"> 2<br>
<input type="radio" name="q1" value="3"> 3<br><br>
<button type="button" id="submit">Get Selected Value</button>
</form>
</body>
</html>
In this example, the selector $('input:radio:checked') finds the checked radio button, and .val() retrieves its value. The preventDefault() method prevents the form from submitting, and we added a check to handle cases where no radio button is selected.
Alternative Method - Using Name Attribute
You can also target a specific radio button group by name ?
var selectedValue = $('input[name="q1"]:checked').val();
This approach is more specific when you have multiple radio button groups on the same page.
Conclusion
The jQuery val() method combined with the :checked selector provides an efficient way to determine which radio button is selected. Always check if a value exists before using it to avoid undefined results.
302 Views
