How to Select Deselect All Checkboxes using jQuery

How to select / deselect all checkboxes using jQuery?

Demo Download

Today I will share a very nice and simple tutorial, this tutorial will explain you  how to select or deselect all checkboxes using jQuery.

You will need to include jQuery library in the header or footer of the website, otherwise this tutorial will not work.

The HTML

<form method="post" action="">
<input type="checkbox" id="checkAll" />
<label>Select/Deselect All</label><br /><br />
<input class="chk" type="checkbox" name="html" value="html" />
HTML<br/>
<input class="chk" type="checkbox" name="javascript" value="javascript" />
JavaScript<br/>
<input class="chk" type="checkbox" name="jquery" value="jquery" />
JQuery<br/><br/>
<input type="submit" name="submit" id="submit" value="Submit" />
</form>

The JQuery

$("#checkAll").change(function () {
      $("input:checkbox").prop('checked', $(this).prop("checked"));
});

Add the following JQuery library in the footer of your page.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'>
</script>

If you found this tutorial helpful, share it with your friends and developers group.

Facebook Official Page: All PHP Tricks

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.

Leave a Reply

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