In this article we will show you the solution of uncheck all checkbox jQuery, here we needs to use change() and prop() method for uncheck all checkboxes and the change() method triggers the change event or attaches a function to run when a change event occurs and prop() method sets or returns properties and values of the selected elements.
This method returns property value then it returns value of first matched element.
Step By Step Guide On Uncheck All Checkbox jQuery :-
Here we defined html block div element with id attribute ‘chal’ within it we defined checkbox for select/unselect set of checkboxes.
Another div element defined with id ‘chlist’ which contains three input language type checkboxes.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that defined change() method with id ‘cal’ of ‘select all’ checkbox so which is refers when check on ‘select all’ change method will load particular process.
There we defined prop() method with all input checkbox which is points current ‘checked’ state and it sets as same for other checkboxes whether check or uncheck.
<!DOCTYPE html>
<html>
<head>
<title>Uncheck all Checkboxes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("input:checkbox").prop('checked',true);
$('#cal').change(function(){
$("input:checkbox").prop('checked',$(this).prop("checked"));
});
});
</script>
</head>
<body>
<div id="chal">
<input type="checkbox" id="cal">check all
</div>
<div id="chlist">
<input type="checkbox" >Tamil
<input type="checkbox" >Chinese
<input type="checkbox" >Korea
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we used change() method on ‘select all’ checkbox which method wait for changes on select all checkbox.
- Within this method we selecting all checkbox by ‘$("input:checkbox")’ then we appending prop() method with that for sets ‘checked’ property value to current ‘select all’ property state.
- So which will whether checked by user all checkbox will automatically checked or to be unchecked.
- In html block we defined two set of div element with id’s (‘chal,chlist’). Within each div defined input element checkbox and output will based on first div checkbox ‘cal’ state of checked attribute.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to uncheck all checked checkbox using jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see check boxes ‘select all’ and ‘Tamil, Chinese,Korea’ with checked state now user needs to uncheck the ‘select all’ checkbox which is unchecks the all checkboxes and if you again checked ‘select all’ checkbox then all language checkboxes also became checked state.
I hope this article on uncheck all checkbox jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
