Hello guys if you are wondering how to check if a checkbox is checked using jQuery then you have come to the right place. Earlier, I have shared, how to check/uncheck checkbox or how to find all unchecked checkboxes using jQuery and in this article, I will share how to check if a particular checkbox is checked or not. While working in Java web application front end, written using JSP, HTML, CSS, and JavaScript, we often need to check status of checkbox e.g. whether a particular checkbox is checked or not? One example of this is checking is checking, whether user has accepted terms and conditions before submitting form. Thankfully, JQuery provides a nice and easy way to find status of checkbox.
By using a single line of JQuery code, you can check whether checkbox is checked or unchecked. You can use is(':checked') in JQuery to check status of checkbox, selected by using JQuery ID selector or any other selector.
This code, will return true if checkbox is checked, otherwise it will return false. In this JQuery tutorial, we are going to see a simple example of HTML and JQuery to see if checkbox is checked or not.
If you want to learn Modern JavaScript or level up your skills then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy. It's one of the best and hand-son course to learn ES 6 and other new Javascript features.
If you want to learn Modern JavaScript or level up your skills then I suggest you join The Complete JavaScript Course: Build Real Project by Jonas Scmedtmann on Udemy. It's one of the best and hand-son course to learn ES 6 and other new Javascript features.
JQuery code to check if a checkbox is checked or not.
In this code example, We have a HTML page which contains a standard terms and condition checkbox. We have provided it id "terms" and we will use this information to select that particular checkbox using JQuery ID Selector.As usual JQuery code is inside $(document).ready() function, so that it will execute once page is loaded completely. Also, code for finding checkbox status is wrapped inside a click event handler. So when a user click on submit button, JQuery will find the terms and condition checkbox, and find if it's checked or not.
Here is the JQuery code for that :
you can see, its amazingly readable, and because it's pure jQuery, it would work on all browsers e.g. Internet Explorer, Google Chrome or Mozilla Firefox. I have tested this code on both Internet Explorer and Chrome, and as expected it's working fine.
$("#checkBoxChecker").click(function (){
var isChecked = $('#terms').is(':checked');
alert("Does Terms and Condition is checked : " + isChecked);
})
you can see, its amazingly readable, and because it's pure jQuery, it would work on all browsers e.g. Internet Explorer, Google Chrome or Mozilla Firefox. I have tested this code on both Internet Explorer and Chrome, and as expected it's working fine.
Alert box will print true or false, depending upon whether checkbox is selected or not. Here is complete code for HTML page, which you can use directly.
It's using JQuery version 1.9.1
HTML and JQuery code for this Example
HTML and JQuery code for this Example
<html>
<head>
<title>How to find if a checkbox is checked in jQuery</title>
</head>
<body>
Please Accept terms and condition by checking the checkbox: <input type="checkbox" id="terms" />
<input type="button" id="checkBoxChecker" value="Submit" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
//check whether checkbox is checked when user clicks button
$("#checkBoxChecker").click(function() {
var isChecked = $('#terms').is(':checked');
console.log("Does Terms and Condition is checked : " + isChecked);
})
});
</script>
</body>
</html>
You Can also run the code online on JSFiddle.com
and here is output, when user forget to check terms and condition checkbox :
and this is how it look like, when user checks terms and condition checkbox :
That's all on How to find if a checkbox is checked or not in JQuery. Like every other example, this JQuery example is also short, very useful and works on all browser. If you are new on JavaScript and JQuery, or still hasn't start learning it, I strongly suggest to start it now. Knowledge of JavaScript and JQuery is very well desired in today's web centric world.
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)
No comments :
Post a Comment