求助：提交含不同字段名的嵌套单选按钮失败

看起来你在构建包含多组单选按钮的表单时遇到了提交问题，从你给出的代码片段来看，主要问题出在单选组的命名和HTML结构嵌套上，我来帮你梳理并修正：

核心问题分析 #

1. 单选组命名错误
   你给性别单选按钮用了name="male"这类独立的命名，这会导致“男”和“女”变成两个互不关联的单选组，用户可以同时选中多个选项，完全违背了单选按钮的设计逻辑——同一组单选必须共享同一个name属性。

2. 非法的嵌套结构
   你把性别单选嵌套在了外层“是否为人类”的单选<label>内部，这种结构会导致浏览器无法正确识别单选组的范围，点击性别选项时可能误触发外层单选的选中状态，最终导致表单数据混乱。

修正后的完整表单代码 #

<form id="w0" class="form-vertical" action="" method="post">
    <input type="hidden" name="_csrf" value="">
    
    <!-- 第一组：是否为人类 -->
    <label>请选择您是否为人类</label>
    <div class="radio">
        <label>
            <input type="radio" name="is_human" value="1"> 是人类
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="is_human" value="0"> 不是人类
        </label>
    </div>

    <!-- 第二组：性别（与外层完全分离） -->
    <label>性别</label>
    <div class="radio">
        <label>
            <input type="radio" name="gender" value="m"> 男
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="gender" value="f"> 女
        </label>
    </div>

    <button type="submit" class="btn btn-primary">提交表单</button>
</form>

额外提示（如果是框架开发） #

从表单ID w0来看，你可能在用Yii框架开发，记得确保后端接收参数的字段名和表单里的name属性一致（比如is_human和gender），这样才能正确获取提交的数据。

如果你的需求是只有选中“是人类”才显示性别选项，那需要用JavaScript来控制性别区域的显示/隐藏，示例逻辑如下：

// 获取是否为人类的单选按钮
const humanRadios = document.querySelectorAll('input[name="is_human"]');
// 获取性别区域
const genderSection = document.querySelector('label:has(input[name="gender"])').parentNode;

// 默认隐藏性别区域
genderSection.style.display = 'none';

// 监听单选按钮变化
humanRadios.forEach(radio => {
    radio.addEventListener('change', function() {
        if (this.value === '1') {
            genderSection.style.display = 'block';
        } else {
            genderSection.style.display = 'none';
            // 隐藏时清空性别选中状态
            document.querySelectorAll('input[name="gender"]').forEach(g => g.checked = false);
        }
    });
});

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