使用for of循环通过单选按钮获取性别值时选男却获女的问题

问题出在你遍历所有input元素时，单选按钮因为共享同一个name属性，遍历到最后一个单选框时，它的value会直接覆盖之前的赋值——不管这个单选框有没有被选中，所以你选Male时，最后遍历到Female的input，data里的性别值就被替换成Female的了。

修复代码 #

<script>
    let regUsers = [];
    let regForm = document.querySelector("#regForm");
    let allRegInput = regForm.querySelectorAll("input");
    let regBtn = regForm.querySelector("#regBtn");

    regForm.addEventListener("submit", function(e){
        e.preventDefault();
        let data = {};
        for(let elem of allRegInput){
            // 声明key为局部变量，避免全局污染
            let key = elem.name;
            // 如果是单选框且未被选中，跳过当前元素
            if (elem.type === 'radio' && !elem.checked) {
                continue;
            }
            data[key] = elem.value;
        }
        regUsers.push(data)
        console.log(regUsers)
    })
</script>

关键说明 #

• 增加了单选框判断逻辑：只有被选中的单选框才会被写入data对象，未选中的直接跳过
• 把key用let声明为循环内的局部变量，避免意外的全局变量问题

内容的提问来源于stack exchange，提问作者Pawan Lal Rathore