SelectRows.js是一个轻量级的jQuery插件，允许您使用复选框来选择HTML表中的单个或多个行。您可以定义要与所选行关联的自定义ID，以便检索并存储它以供进一步使用。

参见：

• 选中所有带复选框的表行-jQuery TableCheckAll.js
• jQuery插件选择表中的多行-多选
• 用于多表行选择的jQuery插件
• 用于多选表行的jQuery插件-jTableCheckbox
• 使用jQuery-tableCheckbox.js选择带复选框的表行
• 使用jQuery创建可检查的表行-简单的复选框表

如何使用它:

1.包括jQuery库和选择行.min.js页面上的脚本。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/selectrows.min.js"></script>

2.将复选框添加到表中的每一行。

<tbody>
  <tr>
    <td style="text-align: center; vertical-align: top;">
      <input class="checkbox select-row" data-rows-group-id="users" type="checkbox" id="123" data-id="123" />
    </td>
    <td>
      <img class="avatar" src="https://www.gravatar.com/avatar/123" alt="Leandro Daniel Sardi" />
    </td>
    <td>
      <input class="user-input input-block-level" type="text" id="name" value="Leandro Daniel Sardi" />
    </td>
    <td>
      <input class="user-input input-block-level" type="text" id="email" value="[email protected]" />
    </td>
    <td>
      <input class="user-input input-block-level" type="text" id="phone" value="123-4567" />
    </td>
  </tr>
  <tr>
    <td style="text-align: center; vertical-align: top;">
      <input class="checkbox select-row" data-rows-group-id="users" type="checkbox" id="456" data-id="456" />
    </td>
    <td>
      <img class="avatar" src="https://www.gravatar.com/avatar/456" alt="Anibal Smith" />
    </td>
    <td>
      <input class="user-input input-block-level" type="text" id="name" value="Anibal Smith" />
    </td>
    <td>
      <input class="user-input input-block-level" type="text" id="email" value="[email protected]" />
    </td>
    <td>
      <input class="user-input input-block-level" type="text" id="phone" value="555-5555" />
    </td>
  </tr>
</tbody>

3.在表格标题中添加“全选”复选框。

<thead>
  <th style="text-align: center; width:15px" >
    <input class="checkbox select-all" data-input-id="ids" data-rows-group-id="users" type="checkbox">
  </th>
  <th style ="width:36px;">
    <!-- picture -->
  </th>
  <th style ="width:auto;">
    Name
  </th>
  <th style ="width:auto;">
    Email
  </th>
  <th style ="width:auto;">
    Phone
  </th>
</thead>

4.创建一个输入字段，在选择后放置行ID。

<input type="text" name="ids" id="ids" value="" />

5.在文档上初始化插件，准备就绪。

$(function(){
  selectRowsJs.init();
});

更新日志：

2022-11-26

• 错误修复

预览截图

在HTML表中选择单行或多行 jQuery SelectRows.Js