es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Existen algunas funciones integradas como onclick para la entrada de radio?

24 Jul, 2023 Programación

Tengo tres entradas de radio y quiero permitir que las entradas de radio devuelvan el valor de los inputs y ejecuten una función cuando el usuario seleccione una opción.

Aquí está el código:

console.log(document.querySelector(‘input[name=”radios”]:checked’).value);

HTML
CSS
Javascript

Gracias por la respuesta de Parthik Gosar, pude obtener el valor del radio input.

Pero el problema es que document.querySelector('input[name="radios"]:checked').value obtendrá el valor de la radio input una vez que la página se cargue, que es null.

Me pregunto si hay alguna función incorporada similar a onclick que ejecute una función cuando el usuario selecciona una opción o alguna otra forma de resolver el problema.

¡Gracias por cualquier respuesta!

*Sé que podemos usar document.getElementById('').checked para verificar, pero ejecutará la función cuando se cargue la página, lo cual no funcionará para mí.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para ejecutar una función cuando un usuario selecciona una de las opciones de radio, puedes utilizar el atributo onchange en cada elemento de entrada.

    Así es como puedes modificar el código para ejecutar una función cuando se selecciona una opción:

    <!-- language: lang-js -->
function handleRadioChange() {
  const selectedValue = document.querySelector('input[name="radios"]:checked').value;
  console.log(selectedValue);
}

<!-- language: lang-html -->
<form>
  <input type="radio" id="HTML" name="radios" value="HTML" onchange="handleRadioChange()">HTML<br>
  <input type="radio" id="css" name="radios" value="CSS" onchange="handleRadioChange()">CSS<br>
  <input type="radio" id="javascript" name="radios" value="JavaScript" onchange="handleRadioChange()">Javascript<br>
  </form>

    Esto ejecutará la función handleRadioChange cada vez que un usuario seleccione una de las opciones de radio, y registrará el valor seleccionado en la consola.

    Puedes reemplazar handleRadioChange con cualquier función que desees ejecutar cuando se seleccione una opción.

Comments are closed.