In the last couple of articles, I have shared a couple of useful jQuery tips like reloading web pages and working with tag selectors. Today, I'll show you how to check or uncheck a particular checkbox using jQuery, one of the most popular JavaScript frameworks. jQuery provides CSS like selectors which can make this kind of task trivial. If you remember, in HTML a checkbox is checked if the "checked" attribute is present and its value is not false, otherwise, it's unchecked. By using jQuery function prop() you can dynamically add this attribute or if present we can change its value i.e. checked=true to make the checkbox checked and checked=false to mark the checkbox unchecked.
Though you should remember that the prop() function is only available from the jQuery 1.6 version and if you are running on a lower jQuery version then you can also use attr() to check/uncheck a particular checkbox.
Some of you might question that should you learn jQuery now, Well, I think you should. Though it has lost some of its charms to Angular, React, and Vue JS but if you are not using those frameworks, jQuery can still be a lifesaver to perform common web development tasks.
Web Development is a constantly changing space but not every project or company adopts them so fast. That's why you find a lot of companies and projects still using jQuery and even plain old HTML with JavaScript.
Btw, if you are new to the web development space, I strongly suggest you go through The Web Developer Bootcamp by Angela Yu at least once. Web Development is a vast area and you need to know a lot of tools and technologies to become a full-stack developer. This course will not only teach you jQuery but also all other important technologies you need to become a better Web Developer.
Anyway, let's just to the task in hand.
You can also use a class selector if there is a class applied to all the checkboxes or you can also use an element selector like input[type='checkbox'] to select all checkboxes.
Depending on whether you want to apply the change to one element or multiple elements, there are a couple of ways to do it in jQuery. I suggest you check The Complete jQuery Course to see the full list of selectors.
Once the checkbox is selected, we are calling prop() function as prop( "checked", true ) to check the checkbox and prop( "checked", false ) to uncheck the checkbox.
When you save this code as test.html and open in a browser e.g. internet explorer, chrome, firefox, or windows edge, you will see the following screen:
You can see there are two buttons and a checkbox is present on the page. If you click the "check the checkbox" button then the checkbox will be checked, as shown in the following screenshot:
Similarly, if you click the "uncheck the checkbox" button then the checkbox will be unchecked as shown in the following screenshot:
That's all about how to check/uncheck a checkbox using jQuery. You can also apply the same logic to check/uncheck a radio button as well. If you have to check multiple checkboxes, instead of ID selector you can either use a class selector, of course only if you have a CSS class applied to them or you can use element selector e.g. input[type="checkbox"] to select multiple checkboxes and then call prop() on them.
Other jQuery articles you may like
Though you should remember that the prop() function is only available from the jQuery 1.6 version and if you are running on a lower jQuery version then you can also use attr() to check/uncheck a particular checkbox.
Some of you might question that should you learn jQuery now, Well, I think you should. Though it has lost some of its charms to Angular, React, and Vue JS but if you are not using those frameworks, jQuery can still be a lifesaver to perform common web development tasks.
Web Development is a constantly changing space but not every project or company adopts them so fast. That's why you find a lot of companies and projects still using jQuery and even plain old HTML with JavaScript.
Btw, if you are new to the web development space, I strongly suggest you go through The Web Developer Bootcamp by Angela Yu at least once. Web Development is a vast area and you need to know a lot of tools and technologies to become a full-stack developer. This course will not only teach you jQuery but also all other important technologies you need to become a better Web Developer.
Anyway, let's just to the task in hand.
How to Check/Uncheck checkboxes using jQuery
Here is a simple jQuery example to show you how to check and uncheck a particular checkbox. In this example, we are selecting one particular checkbox using ID selector, if you want to select multiple checkboxes.You can also use a class selector if there is a class applied to all the checkboxes or you can also use an element selector like input[type='checkbox'] to select all checkboxes.
Depending on whether you want to apply the change to one element or multiple elements, there are a couple of ways to do it in jQuery. I suggest you check The Complete jQuery Course to see the full list of selectors.
Once the checkbox is selected, we are calling prop() function as prop( "checked", true ) to check the checkbox and prop( "checked", false ) to uncheck the checkbox.
jQuery Example to Select Checkbox
Here is a working example:<html>
<head>
<title>How to check/uncheck a checkbox using jQuery</title>
</head>
<body>
<h2>Checking and Unchecking a Check box using jQuery</h2>
<div id="plateform">
<input id = "myCheckbox" type="checkbox"> A CheckBox</input>
</div>
<button id="btn_check">check the checkbox</button>
<button id="btn_uncheck">uncheck the checkbox</button>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn_check").click(function(){
$("#myCheckbox").prop("checked", true);
});
$("#btn_uncheck").click(function(){
$("#myCheckbox").prop("checked", false);
});
});
</script>
</body>
</html>
When you save this code as test.html and open in a browser e.g. internet explorer, chrome, firefox, or windows edge, you will see the following screen:
You can see there are two buttons and a checkbox is present on the page. If you click the "check the checkbox" button then the checkbox will be checked, as shown in the following screenshot:
Similarly, if you click the "uncheck the checkbox" button then the checkbox will be unchecked as shown in the following screenshot:
That's all about how to check/uncheck a checkbox using jQuery. You can also apply the same logic to check/uncheck a radio button as well. If you have to check multiple checkboxes, instead of ID selector you can either use a class selector, of course only if you have a CSS class applied to them or you can use element selector e.g. input[type="checkbox"] to select multiple checkboxes and then call prop() on them.
Other jQuery articles you may like
- 5 Books to learn jQuery for Web developers (books)
- How to get the current URL, Parameters, and Hash using jQuery? (solution)
- How to modify more than one element in one line? (example)
- jQuery Hello World Example (program)
- Free jQuery eBooks and PDFs (download)
- How to use more than one jQuery UI DatePicker on the JSP page? (example)
- How to create tab-based UI using jQuery? (example)
- Top 20 jQuery Interview Questions for Java Web Developers (list)
- How to redirect a page URL using jQuery and JavaScript? (solution)
- How to download jQuery dynamically on a web page? (solution)
- 10 Frameworks Java and Web developer should learn (frameworks)
- The React JS Roadmap - Guide to become Moder Web developer (roadmap)
Thanks for reading this article so far. If you like this jQuery tutorial then please share it with your friends and colleagues. If you have any questions or feedback then please drop a comment.
No comments:
Post a Comment