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

我有一张以上的桌子。表和行是从数据库生成的。如果仅单击该特定表，则需要检查顶部的每个表都有一个复选框。就像我明智的那样，我有更多的表，并且检查对于每个表都应该独立工作。在这里，我把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);
});

最佳答案

id属性应该是唯一的。使用类代替

使用.not()排除当前元素。

使用: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>

关于javascript - 选中每个动态表的所有复选框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35987810/