So, you have a checkbox and you want to check if its selected or not at runtime using jQuery. If that's what you want then continue reading. A checkbox is an HTML element with type="checkbox" and checked property is used to find out whether a checkbox is selected or not. There are several ways to find if your checkbox has this property or not in jQuery e.g. by using :checked, a pseudo selector or by using is() jQuery function or by using prop() function which is available from jQuery 1.6 onward. In this article, we will see examples of these approaches to check if a check box is checked or not.
In the past, I have shared few tutorials about checkbox and jQuery how to check/uncheck checkbox or how to find all unchecked checkboxes using jQuery and today I will share multiple ways to find out if a checkbox is checked or selected or not. For all the ways we will use jQuery because its simple, fast, and very readable.
I will also share sample HTML and JSP code with jQuery which you can run in your favorite browser to test yourself.
Checking if a checkbox is selected using prop()
This method will work even if your page has multiple checkbox and one of them is checked. Remember we are using an ID selector to retrieve checkbox and then checking if its checked or not. Since ID is unique in a HTML page, it will work always.
Here is the code:
// 1st example - by using prop function and checked property
if($('#isAgreed').prop('checked')){
$("#output").append("<h3>#checkbox is checked verified using prop() </h3>");
}Pros:
1) standard method to retrieve property of HTML tag in jQuery
Cons:
1) Not available for jQuery 1.5 or lower version
Checking if a checkbox is checked using is() function
// 2nd example - by using is function and :checked pseudo class
if($('#isAgreed').is(':checked')){
$("#output").append("<h3>#checkbox is checked verified using :checked() </h3>");
}Pros:
1) more readable, goes perfect with if statement
Finding if a checkbox is checked using attr() function
This is another way to find if a checkbox is selected or not but this will only work from jQuery 1.6 and higher version
// 3rd example - using attr() function for jQuery version 1.5 and lover
if($('#isAgreed').attr('checked')){
$("#output").append("<h3>#checkbox is checked verified using attr() function </h3>");
}Pros:
1) work for both jQuery 1.5 and jQuery 1.6 and even higher version
Sample HTML and JSP
Here is our sample HTML/JSP file to demonstrate how to check if a checkbox is checked using jQuery or not. You can just run this HTML in your browser to see the program in action.
In this example, we have an HTML page and a div which contains a checkbox with id as #isAgreed to mimic the checkbox you see on sign up pages that you agree with terms and conditions etc..
In document.ready() function we bind click event to this checkbox to run some jQuery code when user click on it. The code checks if the checkbox is checked, if yes then it display text by appending h3 tag in html document.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//code.jquery.com/jquery-1.6.2.min.js"></script>
<title>How to check if a check-box is selected in jQuery</title>
</head>
<body>
<h2>3 ways to check status of check box using jQuery</h2>
<input type="checkbox" id="isAgreed" />
<div id="output"></div>
<script>
$('#isAgreed').click(function() {
// 1st example - by using prop function and checked property
if($('#isAgreed').prop('checked')){
$("#output").append("<h3>#checkbox is checked verified using prop() </h3>");
}
// 2nd example - by using is function and :checked pseudo class
if($('#isAgreed').is(':checked')){
$("#output").append("<h3>#checkbox is checked verified using :checked() </h3>");
}
// 3rd example - using attr() function for jQuery version 1.5 and lover
if($('#isAgreed').attr('checked')){
$("#output").append("<h3>#checkbox is checked verified using attr() function </h3>");
}
});
</script>
</body>
</html>You can run this code directly in JSFilddle.net, an online HTML, CSS, and JavaScript editor or you can just copy paste in any file, save it as .html and open in your favorite browser.
When you will open it will show following screen, you can see that there is a checkbox:
You can now click that checkbox and it will generate an event which will be captured by our jQuery code and it will print whether checkbox is selected or not as shown in next diagram:
Here is how the whole thing will look, when you run the code in jsfiddle.net website, I generally prefer that for training and demo purpose because it provide an easy interface to code and run HTML, CSS, and JavaScript without any hassle.
That's all about how to check if a checkbox is checked or not using jQuery. You have learned three ways to do that and understand pros and cons of each approach. The best way to check a property of HTML element in jQuery is by using prop() function and if you are in doubt use the prop() method to find out if your checkbox is checked or not.
Other jQuery tutorials and articles you may like
- How to get the current URL, Parameters, and Hash using jQuery? (solution)
- 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)
Do you know any other way to find out if a checkbox is selected or not in jQuery or just plain JavaScript?
jQuery rocks !!
ReplyDeleteI heard jQuery is dead?
ReplyDelete