Node.js中通过POST请求获取单选按钮选中值的问题

嘿，这个问题我之前帮不少开发者踩过坑——单选按钮提交后总是返回'on'，本质上几乎都是因为没给单选按钮设置正确的value属性，或者单选组的name属性没统一导致的。咱们一步步来排查和解决：

1. 最核心的问题：缺少value属性 #

浏览器有个默认行为：如果单选按钮没有设置value属性，当它被选中提交时，会默认发送on作为该字段的值。这就是你遇到的情况！

举个错误的写法（大概率是你现在的代码状态）：

<input type="radio" name="search_param" id="param1">
<label for="param1">按日期搜索</label>
<input type="radio" name="search_param" id="param2">
<label for="param2">按关键词搜索</label>

改成正确的写法，给每个单选按钮加上明确的value：

<input type="radio" name="search_param" id="param1" value="date">
<label for="param1">按日期搜索</label>
<input type="radio" name="search_param" id="param2" value="keyword">
<label for="param2">按关键词搜索</label>

这样提交后，选中的单选按钮就会发送search_param=date或者search_param=keyword，而不是默认的'on'了。

2. 确认单选组的name属性完全一致 #

单选按钮要形成“互斥选择”的组，必须拥有完全相同的name属性。如果每个单选的name不一样，浏览器会把它们当成独立的控件，只要选中就会各自发送'on'（没设value的情况下）。

比如下面这种错误写法，两个单选name不同，就会导致提交时可能同时发送两个'on'：

<input type="radio" name="date_search" id="param1">
<input type="radio" name="keyword_search" id="param2">

一定要把它们的name统一成同一个字段名，比如上面的search_param。

3. 排查JavaScript是否干扰了表单数据收集 #

如果你是用JavaScript手动获取表单数据再发送POST请求，可能不小心取错了值。比如错误地获取了checked状态的相关值，而不是单选按钮的value：

错误示例：

// 错误：没取单选按钮的value，反而取了checked状态相关值
const selectedRadio = document.querySelector('input[name="search_param"]:checked');
const paramValue = selectedRadio ? selectedRadio.checked : '';

正确的写法应该是直接获取value属性：

const selectedRadio = document.querySelector('input[name="search_param"]:checked');
const paramValue = selectedRadio ? selectedRadio.value : '';

4. 服务器端接收逻辑的小检查 #

虽然你说文本框能正常获取值，但还是要确认服务器端是通过表单字段的name（也就是你给单选按钮设置的search_param）来接收值，而不是错误地处理了控件的其他属性。不过这里更大概率还是前端的问题，先排查前面的步骤。

按照上面的流程走，99%的概率能解决你的问题！

内容的提问来源于stack exchange，提问作者maison.m