Javascript 选中每个动态表的所有复选框

Javascript 选中每个动态表的所有复选框,javascript,jquery,Javascript,Jquery,我有不止一张桌子。表和行是从数据库生成的。顶部的每个表都有一个复选框,如果我只单击该表,则需要选中该复选框。像wise一样,我得到了更多的表,并且检查每个表都应该独立工作。在这里,我已经为2个表添加了html 我的表格结构如下: <table width="800" border="1" cellpadding="2" cellspacing="0" class="inlineTable" style="border-collapse: collapse" bordercolor="#00

我有不止一张桌子。表和行是从数据库生成的。顶部的每个表都有一个复选框,如果我只单击该表,则需要选中该复选框。像wise一样,我得到了更多的表,并且检查每个表都应该独立工作。在这里,我已经为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>
$('.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);
});

  • id
    属性应该是唯一的。改用类
  • 使用
    .not()
    排除当前元素
  • 使用
    :checkbox
    选择器仅选择
    类型='checkbox'
    元素
  • $('.selectAll').change(函数(){
    $(this).closest('table').find('list item:checkbox').not(this).prop('checked',this.checked));
    });
    
    
    海威国际(美元)
    Sl号
    投标书说明
    主要
    S2Q
    1.
    无硅胶带
    2.
    紫外线敏感胶带
    趋势区有限公司(美元)
    Sl号
    投标书说明
    技术%
    主要
    S2Q
    1.
    无硅胶带
    2.
    紫外线敏感胶带
    
    我在顶部没有看到任何复选框,请使用
    class
    而不是
    id
    id
    必须是唯一的。@Illamerr。主菜单后,您会在标题中看到一个复选框。。这是checkall复选框。行是用PHP动态创建的。这就是为什么我不知道如何创建动态ID。。这就是我选择餐桌的原因。餐桌是否可行。当我选中第一个表的复选框时,它应该只选中该表的所有部分,就像其他表一样。。有可能吗?有点疑问。你也知道PHP吗。我对php和jquery的相关内容有疑问。我已经问过这个问题了,但没有得到多少帮助。。