如何访问按表单内的字段集分组的单选按钮的值，将它们用作 Javascript 中的属性"name"？

Question

我没有使用框架。我有一个窗体，其中有一个对单选按钮进行分组的字段集。 我已经在前端Javascript中获得了表单元素，现在，我想知道单选按钮的女巫被选中了。为此，我正在尝试使用字段集和单选按钮的名称。但是我得到了一个未定义的：

const formElement = document.getElementById('form-cad-usuario')
formElement.onsubmit = e => {
e.preventDefault()
const formUser = e.target
console.log(formUser.generos.checked)   //Returns undefined
console.log("geneto: "+formUser.generos.genero.checked) //Returns undefined
}

<form method="dialog" class="formulario" id="form-cad-usuario">
<fieldset name="generos">
<legend>Gênero </legend>
<input type="radio" name="genero" value="Feminino"> Feminino
<input type="radio" name="genero" value="Masculino"> Masculino
<input type="radio" name="genero" value="Outros"> Outros
</fieldset>
<button type="submit">Cadastrar</button>
</form>

我以为我可以使用它的子"名称"属性浏览表单。那么怎么了呢？

Answer 1

您可以使用过滤器和映射来获取已检查输入的值。

const formElement = document.getElementById("form-cad-usuario");
formElement.onsubmit = (e) => {
e.preventDefault();
const formUser = e.target;

const checkedInput = [...formUser.elements]
.filter((input) => input.checked) // Here you filter the inputs to get the checked value
.map((input) => input.checked); // here you get the checked input value

console.log(checkedInput);
};

<form method="dialog" class="formulario" id="form-cad-usuario">
<fieldset name="generos">
<legend>Gênero </legend>
<input type="radio" name="genero" value="Feminino"> Feminino
<input type="radio" name="genero" value="Masculino"> Masculino
<input type="radio" name="genero" value="Outros"> Outros
</fieldset>
<button type="submit">Cadastrar</button>
</form>

Answer 2

我发现"fieldset"标签没有"name"属性。但是，我只能使用单选按钮"name"直接从表单导航到单选按钮，并通过"value"属性获取选中按钮的值。所以我像这样解决：

console.log(formUser.genero.value(//打印选定的无线电