在Node+Express+Mongoose项目中如何通过单选按钮传递布尔值

问题原因 #

HTML表单提交的input值默认都是字符串类型，你硬编码的value="true"和value="false"提交到后端后会被解析为字符串"true"/"false"，而非布尔值。如果你的Cat数据模型中sex字段定义为Boolean类型，直接传入字符串会出现类型不匹配，导致赋值失败。

解决方案 #

方案1：后端转换类型（推荐） #

直接在POST路由中对性别字段做类型转换，逻辑更可靠，不会被前端篡改绕过：

app.post('/cats', async (req, res) => {
    // 扩展原有猫咪数据，将性别字符串转为布尔值
    const catParams = {
        ...req.body.cat,
        sex: req.body.cat.sex === 'true'
    }
    const cat = new Cat(catParams);
    await cat.save();
    res.redirect(`/cats/${cat._id}`);
})

方案2：补充HTML label提示（可选优化） #

你的原HTML缺少label标签，用户无法点击文字选中单选按钮，补充后体验更好：

<div class="form-check">
  <input class="form-check-input" type="radio" name="cat[sex]" id="radioMale" value="true" checked>
  <label class="form-check-label" for="radioMale">公猫</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="cat[sex]" id="radioFemale" value="false">
  <label class="form-check-label" for="radioFemale">母猫</label>
</div>

方案3：前端转换类型（可选） #

如果你是用AJAX异步提交表单，可以在前端提交前做类型转换：

// 前端表单提交逻辑示例
const catForm = document.querySelector('#cat-form');
catForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(catForm);
    const submitData = {
        cat: {
            // 其他字段按需补充
            sex: formData.get('cat[sex]') === 'true'
        }
    };
    const res = await fetch('/cats', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(submitData)
    });
    window.location.href = res.url;
})

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