提交HTML表单时复选框选中内容未传递，求bug排查与解决方法

问题根源（Bug点） #

• 复选框未设置正确的name属性：同一组复选框的name必须统一为[组名][]（比如fruits[]）的数组格式，否则只会传递最后一个选中项的数值，甚至完全无法传递参数。
• 复选框缺失value属性：没有设置value的复选框，选中后默认传递on字符串，但如果连value都未定义，部分浏览器不会将该复选框纳入提交参数。
• 复选框被设置disabled属性：禁用状态的表单元素不会被表单提交时携带。

解决方法与示例代码 #

要成功获取复选框选中内容，需满足以下要求：

1. 同一组复选框使用统一的数组格式name属性（如fruits[]）
2. 每个复选框设置明确的value属性
3. 移除需要提交的复选框的disabled属性（如果有）

正确的表单代码示例 #

<form method="GET" action="/submit">
  <!-- 下拉选择框 -->
  <label for="cars">选择汽车:</label>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>

  <!-- 水果复选框组 -->
  <p>选择水果:</p>
  <label><input type="checkbox" name="fruits[]" value="apple"> 苹果</label>
  <label><input type="checkbox" name="fruits[]" value="banana"> 香蕉</label>
  <label><input type="checkbox" name="fruits[]" value="orange"> 橙子</label>

  <button type="submit">提交</button>
</form>

后端接收示例 #

• PHP：通过$_GET['fruits']获取选中值的数组
• Python Flask：使用request.args.getlist('fruits')获取数组
• Node.js Express：GET请求用req.query.fruits，POST请求需先解析表单，再通过req.body.fruits获取

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