javascript - 选择表中行具有样式显示标记的所有复选框

Question

我有一个表，其中一些行具有样式显示标记style="display: none;"。我还有一个“全部切换”复选框。我试图让我的“全选”脚本仅检查带有标签 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>