EJS中checkbox添加checked属性后无法获取value值的问题

问题原因 #

这是浏览器表单提交的默认规则导致的：

• 表单提交时，只有处于「选中状态」的checkbox才会被包含在提交的表单数据中
• 你的代码通过onchange事件触发表单提交：
  • 当checkbox初始无checked属性时，用户点击会切换为「选中」状态，此时提交表单会带上该checkbox的value，后端能正常获取
  • 当checkbox初始有checked属性时，用户点击会切换为「未选中」状态，此时浏览器不会把未选中的checkbox数据提交给服务器，所以后端拿不到对应的value

解决方案 #

方案1：添加隐藏input存储ID（推荐） #

在每个checkbox所在的表单里添加一个隐藏input，用来存储对应item的ID，这样不管checkbox状态如何，表单提交时都会带上这个ID：

<% newListItems.forEach(function(item) { %>
    <form action="/delete" method="post">
      <div class="item">   
          <% let completed = item.done ? "checked" : "" %>
          <input type="checkbox" <%=completed%> onchange="this.form.submit()">  
          <!-- 新增隐藏input存储ID -->
          <input type="hidden" name="itemId" value="<%=item._id%>">
          <p><%=  item.name  %></p>
      </div>
    </form>
<% }) %>

后端接收时，直接从req.body.itemId获取对应的ID即可。

方案2：通过JS手动处理表单数据 #

修改onchange事件，不管checkbox状态如何，都把ID作为表单数据提交：

<% newListItems.forEach(function(item) { %>
    <form action="/delete" method="post">
      <div class="item">   
          <% let completed = item.done ? "checked" : "" %>
          <input type="checkbox" <%=completed%> value="<%=item._id%>" name="modified" onchange="submitFormWithId(this)">  
          <p><%=  item.name  %></p>
      </div>
    </form>
<% }) %>

<script>
function submitFormWithId(checkbox) {
  const form = checkbox.form;
  // 创建隐藏input并添加到表单
  const hiddenInput = document.createElement('input');
  hiddenInput.type = 'hidden';
  hiddenInput.name = 'itemId';
  hiddenInput.value = checkbox.value;
  form.appendChild(hiddenInput);
  form.submit();
}
</script>

后端同样从req.body.itemId获取ID。

项目依赖版本 #

"dependencies": {
    "body-parser": "^1.18.3",
    "ejs": "^3.1.8",
    "express": "^4.16.3",
    "mongoose": "^6.8.1"
  }

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