Select table 行中具有样式显示标签的所有复选框

Question

我有一个 table，其中一些行具有样式显示标签 style="display: none;"。我还有一个 "toggle-all" 复选框。我正在尝试让我的 "select all" 脚本只检查带有标签 style="display: table-row;".

的行中可见的复选框

这是我目前拥有的脚本，但它会检查所有内容，而不考虑可见性。我如何才能 check/uncheck 只有那些可见的？

脚本

$('#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

<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

或者您可以 select 按如下属性：

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

Select table 行中具有样式显示标签的所有复选框

Select all checkboxes in a table whose rows have style display tag

html

javascript

checkbox

html-table

display