Как получить доступ к значению переключателя, который сгруппирован набором полей внутри формы, используя их свойство «name» в Javascript?

Question

Я не использую фреймворки. У меня есть форма, и внутри нее у меня есть набор полей, который группирует переключатель. Я получил элемент формы в интерфейсе Javascript, и теперь я хочу знать, что переключатель переключателей установлен. Для этого я пытаюсь использовать имена полей и переключателей. Но я получаю undefined:

       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>

Я думал, что могу перемещаться по форме, используя ее дочерние свойства «name». Так в чем дело?

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». Но я могу перейти к переключателю прямо из формы, используя только «имя» радио, и получить значение отмеченного с помощью атрибута «значение». Итак, я решил вот так:

console.log (formUser.genero.value) // Выводит выбранное радио