How To Uncheck Checkbox In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Dikshita
In this article we will show you the solution of how to uncheck checkbox in jQuery, a checkbox can be dynamically checked or unchecked using jQuery prop(), such as when a button is clicked or a hyperlink is clicked.
The prop() method needs jQuery 1.6 or a later version to work.JavaScript framework jQuery is used to create this particular checkbox.With jQuery's CSS-like selectors, this kind of operation is simple to complete.
When the "checked" attribute is present and the value of the attribute is not false, a checkbox is considered checked, otherwise unchecked.
By utilising the jQuery function prop, this attribute's value can be added or changed dynamically ().
For example, checked=true makes the checkbox checked and checked=false marks it as unchecked.
Although you can also check or uncheck a particular checkbox using attr() if you are running jQuery 1.6 or lower. The prop() function is only available for jQuery 1.6.
There might be some of you who wonder if you should learn jQuery now. Of course, I think you should.
The jQuery framework may have lost some of its charm to Angular, React, and Vue JS, but it can still be a lifesaver for web developers not using those frameworks.
Step By Step Guide On How To Uncheck Checkbox In jQuery :-
<html>
<head>
<title>TalkersCode Example</title>
</head>
<body>
<h2>TalkersCode Checking and Unchecking a Checkbox</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>
- Our first step is to write <HTML>, which tells the browser what version of HTML we're using. HTML documents contain tags as their first element.
- The project's heading must be described using the head> tag. Titles and final brackets differ from final brackets because they are both open, rather than closed.
- Once the head is closed, the eyes are closed as well.
- The <body> tag follows, which describes the content of the webpage.
- After that, a checkbox is created using the input id.
- Once the button has been created, we will proceed to the next step.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- We then find that if you need to check multiple checkboxes, you can either use a class selector instead of the ID selector, but only if they have CSS classes assigned to them, or you can use an element selector, such as input[type="checkbox"] to select multiple checkboxes and then call prop().
- After that we closed program using </script></body></html>
Conclusion :-
If all of the checkboxes have a class attached to them, you may additionally employ a class selector, or you can include an element selector as input[type='checkbox'] and pick all checkboxes.
I hope this article on how to uncheck checkbox in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
