选中表格中所有行具有样式显示标签的复选框

Question

我有一个表格，其中一些行具有样式显示标签style="display: none;"。我还有一个“toggle-all”复选框。我试图让我的“全选”脚本只检查标记为style="display: table-row;" 的行中可见的复选框。

这是我目前拥有的脚本，但它会检查所有内容，无论可见性如何。如何仅选中/取消选中可见的那些？

脚本

$('#select-all').click(function (event) {
   if (this.checked) {
      $(':checkbox').each(function () {
          this.checked = true;
      });
   }
   if (!this.checked) {
      $(':checkbox').each(function () {
          this.checked = false;    
       });
   }
});

切换所有复选框

<input name="select-all" id="select-all" type="checkbox" value="checked" aria-label="..." style="cursor:pointer">

表格

<table>
   <tbody>
     <tr>
      <td>Checkbox</td>
      <td>#</td>
      <td>Number</td>
      <td>Title</td>
    </tr>

    <tr style="display: table-row;">
      <td><input type="checkbox" name="f1" value="1"></td>
      <td>1</td>
      <td>Number1</td>
      <td>Title1</td>
    </tr>

    <tr style="display: none;">
      <td><input type="checkbox" name="f2" value="1"></td>
      <td>2</td>
      <td>Number2</td>
      <td>Title2</td>
    </tr>

    ...

    <tr style="display: table-row;">
      <td><input type="checkbox" name="f3" value="1"></td>
      <td>3</td>
      <td>Number3</td>
      <td>Title3</td>
    </tr>
</tbody>    
</table>

Answer 1

你可以使用:visible selector和.prop()来操作属性

$('#select-all').click(function(event) {
  $('table tr:visible :checkbox').prop('checked', this.checked)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="select-all" id="select-all" type="checkbox" value="checked" aria-label="..." style="cursor:pointer"> select-all
<table>
  <tbody>
    <tr>
      <td>Checkbox</td>
      <td>#</td>
      <td>Number</td>
      <td>Title</td>
    </tr>

    <tr style="display: table-row;">
      <td><input type="checkbox" name="f1" value="1"></td>
      <td>1</td>
      <td>Number1</td>
      <td>Title1</td>
    </tr>

    <tr style="display: none;">
      <td><input type="checkbox" name="f2" value="1"></td>
      <td>2</td>
      <td>Number2</td>
      <td>Title2</td>
    </tr>

    <tr style="display: table-row;">
      <td><input type="checkbox" name="f3" value="1"></td>
      <td>3</td>
      <td>Number3</td>
      <td>Title3</td>
    </tr>
  </tbody>
</table>

Answer 2

或者您可以按属性选择，例如：

$(':checkbox[style="display: none;"]').each(function () {
      this.checked = false;
});