In last couple of articles, you have learned how to get all checked checkbox and how to find the unchecked checkbox using jQuery, let's see another similar example, this time with radio button. Suppose, in form you have two radio buttons to select the gender i.e. male and female. How do you find which radio button was selected when user clicked on them? well, we will use the jQuery selector to find that. In fact, its not much different than what you have used to find the checked checkbox i.e. $("input[type=radio]:checked") will give the selected radio button. In order to find the chosen radio button when user click, you need to bind a click handler.
Let's see an example.
jQuery example to find the selected radio button on click
In our example, we have a form with two radio buttons male and female, make sure you keep the name of radio buttons same to use them as group i.e. only one of them can be selected at a time.
In our $(document).ready() function we have registered a click handler with our form. The code, $(#info") return the form and click() attach the function we passed to it. On click handler we are getting the selected radio button by using following jQuery selector:
$("input[type=radio]:checked")This will only return the checked or selected radio button.
Now we are getting its id by calling the attr() function and printing it using an alert. So, when you click on any of these radio button, you will see the alert box with id of chosen radio button.
<html>
<head>
<title>How to find the selected radio button using jQuery</title>
</head>
<body>
<h2>jQuery example to find the selected radio button in a form</h2>
<form id="info">
<input type="radio" name="gender" id="male">male
<input type="radio" name="gender" id="female">female
</form>
<script src="//code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
$("#info").click(function(){
var id = $("input[type=radio]:checked").attr("id");
alert(id);
});
});
</script>
</body>
</html>Output:
When you will run this HTML code either by saving as .html file or just copy and paste in an online website like jsfiddle.net, you will see following webpage:
When you click any of the radio button, a popup will come and display which radio button you have clicked like shown below:
Alternative way to find selected radio button from a Form using jQuery
There is another way to find the selected radio button from a form in jQuery e.g. you can also get all radio buttons and filter the ones which are checked by using following code:
var allRadioButtons = $(input[type=radio]");
allRadioButtons.filter(":checked");This is similar to what we have done when we find all the selected checkboxes in our earlier example.
That's all about how to find the selected radio button on click using jQuery. Btw, that's not the only way, you can also use couple of other jQuery selectors to select radio buttons e.g. $(input[name=radioName]:checked), being consistent is better. If you have any questions or doubt feel free to ask in comments.
Other jQuery tutorials and articles you may like
Thank you guys for reading this jQuery tutorial so far. Do you know any other way to get the selected radio buttons from a form in jQuery or just plain JavaScript? If you know, feel free to share with us in comments.
- How to show and hide a div using jQuery? (example)
- How to get the current URL, Parameters, and Hash using jQuery? (solution)
- How to dynamically create a div using jQueyr? (div example)
- 3 Ways to check if a checkbox is selected in jQuery? (solution)
- How to modify multiple elements in one go? (jquery tutorial)
- How to enable/disable an element using jQuery? (example)
- How to find all unchecked checkbox in jQuery? (tutorial)
- jQuery Hello World Example (program)
- How to enable/disable form elements in jQuery? (tutorial)
- How to use more than one jQuery UI DatePicker on the JSP page? (example)
- How to check/uncheck checkboxes in jQuery? (tutorial)
- How to create tab-based UI using jQuery? (example)
- How to redirect a page URL using jQuery and JavaScript? (solution)
- How to find all checked checkboxes in jQuery? (example)
- 20 jQuery Interview Questions for Java Web Developers (list)
- How to load jQuery on a web page? (solution)
- How to use multiple jQuery UI Date Picker in a page? (tutorial)
- How to solve jQuery - uncaught reference error $ is not defined error? (solution)
Thank you guys for reading this jQuery tutorial so far. Do you know any other way to get the selected radio buttons from a form in jQuery or just plain JavaScript? If you know, feel free to share with us in comments.
No comments:
Post a Comment