如何构造跨页HTML表单实现无JavaScript勾选消息批量删除功能

直接使用HTML5原生的form属性即可满足需求，不需要任何JavaScript代码。

具体修改方法 #

• 先给顶部的form表单设置唯一id，比如命名为msgDelForm，同时可以把删除提交按钮放在这个form内部：

<form action='/action.php' id="msgDelForm">
<!-- 页面顶部其他内容 -->
<button type="submit" name="op" value="delete_msg">删除选中消息</button>
</form>

• 所有消息对应的复选框都添加form属性，属性值和form的id保持一致，同时复选框的name设置为数组格式msg_ids[]，方便后端批量接收选中的消息ID：

<!-- 每条消息的复选框示例 -->
<input type="checkbox" name="msg_ids[]" value="123" form="msgDelForm"> 消息1内容
<input type="checkbox" name="msg_ids[]" value="124" form="msgDelForm"> 消息2内容

说明 #

• 该方案是纯HTML原生实现，所有现代浏览器都兼容，提交效果和把复选框写在form标签内部完全一致
• 复选框name必须加[]后缀，否则后端只能接收到最后一个勾选的消息ID
• 你之前写的全选复选框也可以用同样的方式绑定到该form上

内容的提问来源于stack exchange，提问作者jwen