选中复选框上的打字稿

在开发中，有时会遇到需要用户在列表或表格中选中复选框并对选中的数据进行操作的情况。本文将介绍如何获取选中的复选框对应的数据。

HTML结构

假设我们有一个简单的表格实现，其中包含了复选框和对应的数据：

<table>
  <thead>
    <tr>
      <th></th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="user" value="1"></td>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="user" value="2"></td>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="user" value="3"></td>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

获取选中复选框对应的数据

我们需要的是获取用户选中的复选框的值，也就是选中的用户的id。我们可以使用以下代码：

$('#getChecked').click(function() {
  var checkedIds = [];
  $('input[name="user"]:checked').each(function() {
    checkedIds.push($(this).val());
  });
  console.log(checkedIds);
});

代码解析：

1. $('#getChecked').click 监听按钮的点击事件，执行获取选中复选框对应数据的操作。
2. var checkedIds = [] 创建一个空数组，用于存储选中的复选框的值。
3. $('input[name="user"]:checked').each 遍历所有选中的复选框，将其对应的值（即用户id）放入 checkedIds 数组中。
4. console.log(checkedIds) 输出选中的所有用户id。

结语

在处理数据之前可以使用上述方法获取用户选择的数据，如果你要进行批量修改或删除某些数据，那么上述方法就非常实用了。