Learn how to use jQuery to check and uncheck HTML checkboxes.
When you are working with forms you might want to have jQuery uncheck checkbox. This is pretty easy to do with a simple jQuery statement.
jQuery Uncheck Checkbox
$('#someElem').prop('checked', false);Where the checkbox has the id of someElem. The only thing you might run in to problems with is the fact that earlier versions of jQuery (like < 1.6) don’t actually have support for the prop() function. Therefore you would replace this with this with the attr() function.
$('#someElem').attr('checked', false);There is some questions about the reliability of the jQuery attr() function’s reliability of retrieving the value of checked items. This might be an issue if you are using your jQuery code to retrieve the value of a checkbox which you’ll likely need to do at some point. So where possible, make sure you’re using a version of jQuery greater than 1.6 and ensure you are using the prop() function.
jQuery Check Checkbox
OK, so this one is simple right? If you want to uncheck a checkbox you use prop(‘checked’, false’) so can you guess what you would do to check it? You got it. Here’s a full example if you need to copy and paste.
$('#someElem').prop('checked', true);As with all jQuery code, make sure you’re wrapping your code in the document ready function to wait until the DOM is loaded.
Setting the default checked state
Of course if you are just using jQuery to set the initial state of the checkbox and want to have it checked initially, you could just set this as a property of the HTML element.
You can technically just add the checked property to the element but it’s good for browser compatibility to add the string in too, to support older browsers. Hopefully this also illustrates what you are doing with the jQuery code - you’re just toggling this property being there.
Conclusion
Simple to do with jQuery, unchecking checkboxes is something you might want to incorporate in to your code. Just remember to use the prop() function and ensure you are using a newer version of jQuery for it to work.