How to check / uncheck all check boxes using jQuery?

How to check / uncheck all check boxes using jQuery? We have noticed select/deselect functionality in the wordpress admin dashboard basically which allows you to select all posts on the page with single click. Which can be convenient to have check / uncheck multiple checkboxes with single click especially if the list is long.

Here is the code snippet:
HTML:

<ul class=”chk-box”>
<li><input id=”selecctall” name=”select” type=”checkbox” /> Selecct All</li>
<li><input class=”select” name=”check[]” type=”checkbox” value=”1″ />View Post</li>
<li><input class=”select” name=”check[]” type=”checkbox” value=”2″ />Add Posts</li>
<li><input class=”select” name=”check[]” type=”checkbox” value=”3″ />Delete Posts</li>
<li><input class=”select” name=”check[]” type=”checkbox” value=”4″ />Create Posts</li>
<li><input class=”select” name=”check[]” type=”checkbox” value=”5″ />Post list</li>
</ul>

JQuery:

$(document).ready(function() {
$(‘#selecctall’).click(function(event) {
if(this.checked) { // check select status
$(‘.select’).each(function() {
this.checked = true; //select all
});
}else{
$(‘.select’).each(function() {
this.checked = false; //deselect all
});
}
});

});

when user clicks “Select All” checkbox, the code first checks the status of checkbox with id “selecctall”, and loops thought each checkbox with class ‘permission’ and applies “selecctall” checkbox status to all other checkboxes.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face – we are here to solve your problems.

I, Dayanand Saini,the founder and chief editor of www.webtechsource.com,have been working as a software engineer from last 4+ years. It's my hobby to learn new things and implement on live environment.

Leave a Reply

Your email address will not be published. Required fields are marked *

82 − = 79

%d bloggers like this: