我有不止一张 table 。表和行是从数据库生成的。顶部的每个表我都有一个复选框,如果我只单击需要选中的特定表复选框。明智的做法是我得到了更多的表格,并且所有检查都应该独立于每个表格工作。在这里我放了 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 (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 (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);
});
最佳答案
为每个主复选框提供复选框类名 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);
});
关于javascript - 选择每个动态表的所有复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35987810/