Question

我有一个表格，其中一些行具有样式显示标记style="display: none;"。我还有一个＆＃34; toggle-all＆＃34;复选框。我试图让我的所有＆＃34;选择所有＆＃34;脚本只检查标记为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;
});

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

2 个答案: