Select all checkboxes for each dynamic tables

Question

i have more than one table. The table and rows are generated from the database. Each table on the top i got a checkbox, if i click only that particular table checkboxes needs to be checked. Like wise i got more tables and the check all should work independently for each tables. Here i have put the html for 2 tables.

My table structure is below:

<table width="800" border="1" cellpadding="2" cellspacing="0" class="inlineTable" style="border-collapse: collapse" bordercolor="#000000">
<tr><td colspan="5" align="center" width="800"><strong>Haweye International&nbsp;(USD)</strong></td></tr>
<tr>
                <th>Sl No</th>
                <th width=130>Tender Description</th>
                <th>Main</th>
                <th><input type="checkbox" id="selecctall"/></th>
                <th title="Selected to Quotation">S2Q</th>
                </tr>
        <tr align='center'><td>1</td><td width='140'>Silicon Free Tape </td><td></td><td><div class='list-item'><input class='checkbox1' type='checkbox' name='member[1]' value='53'></div></td><td title='Selected to Quotation' class="dark"><input type="checkbox" disabled="disabled" name="comparitive[]" value="53"  checked='checked' /></td>
</tr><tr align='center'><td>2</td><td width='140'>UV Sensitive Tape</td><td></td><td><div class='list-item'><input class='checkbox1' type='checkbox' name='member[2]' value='54'></div></td><td title='Selected to Quotation' class="dark"><input type="checkbox" disabled="disabled" name="comparitive[]" value="54"  checked='checked' /></td>
</tr></table>

<table width="800" border="1" cellpadding="2" cellspacing="0" class="inlineTable" style="border-collapse: collapse" bordercolor="#000000">
<tr><td colspan="6" align="center" width="800"><strong>Trend Zone limited&nbsp;(USD)</strong></td></tr>
<tr>
                <th>Sl No</th>
                <th width=130>Tender Description</th>
                <th>Tech %</th>
                <th>Main</th>
                <th><input type="checkbox" id="selecctall"/></th>
                <th title="Selected to Quotation">S2Q</th>
                </tr>
        <tr align='center'><td>1</td><td width='140'>Silicon Free Tape </td><td></td><td></td><td><div class='list-item'><input class='checkbox1' type='checkbox' name='member[3]' value='63'></div></td><td title='Selected to Quotation' class="dark"><input type="checkbox" disabled="disabled" name="comparitive[]" value="63" /></td>
</tr><tr align='center'><td>2</td><td width='140'>UV Sensitive Tape</td><td></td><td></td><td><div class='list-item'><input class='checkbox1' type='checkbox' name='member[4]' value='64'></div></td><td title='Selected to Quotation' class="dark"><input type="checkbox" disabled="disabled" name="comparitive[]" value="64" /></td>
</tr></table>

The jquery is below:

$('.selectAll').click(function(e){
  var tr= $(e.target).closest('tr');
  $('td input:checkbox',tr).prop('checked',this.checked);
});

Answer 1

Give that checkbox class name class="selectAll" for each main checkbox and JS would be like following :

// just in case
// use event delegation here to ensure appended elements
// were bound to this handler
// you can replace `document` with the placeholder
// that dynamic elements inserted with
$(document).on('click','.selectAll', function(e){
  var table= $( this ).closest('table');
  table.find(':checkbox').not( this ).prop('checked',this.checked);
});

DEMO