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

Twitter Official Page: All PHP Tricks