You might consider a little html augmentation before you assign your event handlers.
Here is a fiddle for this example:
See fiddle example here
You need your javascript to iterate through an html structure that is repeatable. So, say you have an html structure like this: (see the fiddle)
<table class="jsSelectAll">
<tbody>
<tr class="select-all">
<td>Select All</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Row Label</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Row Label</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</tbody>
<tbody>
<tr class="select-all">
<td>Select All</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Row Label</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</tbody>
</table>
Then, I would consider breaking out each table and tbody within the table as you need to, and add row (if desired) and column pointers to the checkboxes. Also, I would use closures to make the event wiring a bit easier, like this:
jQuery(function ($) {
// closures
var $tables = $('table.jsSelectAll');
$tables.each(function () {
// closures
var $table = $(this);
var $tbodies = $table.find('tbody');
$tbodies.each(function () {
// closures
var $tbody = $(this);
var $rows = $tbody.find('tr');
var $selectAllCheckboxes = $tbody.find('.select-all input[type="checkbox"]');
var $allCheckboxes = $tbody.find('tr td input[type="checkbox"]')
// label data cells with rows(if desired) and collumns
$rows.each(function (rowIndex) {
// closures
var $row = $(this);
var $inputs = $row.find('input[type="checkbox"]');
$row.attr('data-row', rowIndex);
$inputs.each(function (colIndex) {
// closures
$cbx = $(this);
$cbx.attr('data-col', colIndex);
});
});
// wire select all for each select-all row checkbox
$selectAllCheckboxes.each(function () {
// closures
var $cbx = $(this)
var fClick = function () {
var iCol = $cbx.attr('data-col');
$allCheckboxes
.filter('[data-col="' + iCol + '"]')
.each(function () {
$(this).prop('checked', true);
});
};
$cbx.click(fClick);
});
});
});
});