批量更新

此演示展示了如何实现一种常见模式：选择多行后进行批量更新。这是通过以下方式实现的： 在表格周围放置一个表单，表格中包含复选框，然后在表单提交（POST 请求）中包含已选中的值：

<form id="checked-contacts"
      hx-post="/users"
      hx-swap="innerHTML settle:3s"
      hx-target="#toast">
    <table>
      <thead>
      <tr>
        <th>姓名</th>
        <th>邮箱</th>
        <th>激活状态</th>
      </tr>
      </thead>
      <tbody id="tbody">
        <tr>
          <td>Joe Smith</td>
          <td>joe@smith.org</td>
          <td><input type="checkbox" name="active:joe@smith.org"></td>
        </tr>
        ...
      </tbody>
    </table>
    <input type="submit" value="批量更新" class"btn primary">
    <output id="toast"></output>
</form>

服务器将根据复选框的值批量更新状态。 我们返回一个小的 toast 消息通知用户更新，并使用 <output> 元素为可访问性友好地宣布更新。注意 <output> 元素适合宣布特定表单操作的结果， 但如果您需要宣布与表单无关的通用消息，使用 ARIA 实时区域更有意义，例如 <p id="toast" aria-live="polite"></p>。

#toast.htmx-settling {
  opacity: 100;
}

#toast {
  background: #E1F0DA;
  opacity: 0;
  transition: opacity 3s ease-out;
}

很酷的是，由于 HTML 表单输入已经管理自己的状态， 我们不需要重新渲染用户表格的任何部分。激活的用户已经 被勾选，未激活的用户未被勾选！

您可以在下面看到此代码的工作示例。

🔗演示