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 ASP.net 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="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Add the script after:

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

In the header template add the text:

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