Check all checkboxes in a table via an onclick using jQuery

Published on Tuesday, 28 January 2014

I was after some clear concise JavaScript/jQuery to Check/Uncheck all checkboxes in an Gridview (which renders as a table). A lot of the implementations I found were using a CheckBox in the header row to make this work, but this is not what I wanted.

There should be a piece of text in the header row that is clickable which should either mark them all as checked or unchecked when it is clicked.

Reference jQuery using your preferred method:

<script src="//"></script>

Add the script after:

<script type="text/javascript">
var AllChecked = true;
function CheckAllBoxes() {
$('.tableClass input:checkbox').attr('checked',  AllChecked);
AllChecked = ! AllChecked;

In the header template add the text:

<label onclick="CheckAllBoxes()">Check All</label>