爲每個動態表格選擇所有複選框

Question

我有多個表格。表和行從數據庫中生成。頂部的每個表格都有一個複選框，如果我只點擊那個特定的表格複選框需要檢查。就像明智的我有更多的桌子和檢查所有應該爲每個桌子獨立工作。在這裏我已經把2個表格的html。

我的表結構如下：

<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> 

jQuery的是下面：

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

Answer 1

1. id屬性應該是唯一的。改用類別
2. 使用.not()排除當前元素。
3. 使用:checkbox選擇只選擇type= 'checkbox'元素

$('.selectAll').change(function() { 
 
    $(this).closest('table').find('.list-item :checkbox').not(this).prop('checked', this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<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" class="selectAll" /> 
 
    </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" class="selectAll" /> 
 
    </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>

Answer 2

給該複選框類名class="selectAll"每個主複選框，JS會像如下：

// 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