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 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:
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.
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.
Other jQuery tutorials and articles you may like
- How to get the current URL, Parameters, and Hash using jQuery? (solution)
- 3 Ways to check if a checkbox is selected in jQuery? (solutionsolution)
- How to modify multiple elements in one go? (jquery tutorial)
- 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)
No comments :
Post a Comment