JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fronteed.com/iCheck/icheck.js"></script>
<link rel="stylesheet" href="http://fronteed.com/iCheck/skins/square/green.css">
<h2>Multiple Checkbox Select/Deselect</h2>
<table border="1">
<tbody><tr>
<th><input type="checkbox" id="selectall"></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</tbody>
</table>
JavaScript
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-green'
});
$('#selectall').on('ifChecked', function (event) {
$('.case').each(function () { //loop through each checkbox
$('.case').iCheck('check'); //select all checkboxes with class "checkbox1"
});
});
$('#selectall').on('ifUnchecked', function (event) {
$('.case').each(function () { //loop through each checkbox
$('.case').iCheck('uncheck'); //deselect all checkboxes with class "checkbox1"
});
});
});