批量更新

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

<form id="checked-contacts"
      hx-post="/users"
      hx-swap="innerHTML settle:3s"
      hx-target="#toast">
    <table>
      <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Active</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="Bulk Update" 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 表单输入已经管理它们自己的状态，我们无需重新渲染用户表格的任何部分。活跃用户已经选中，非活跃用户未选中！

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

🔗Demo