0

Tengo un problema al intentar validar estos botones tipo radio. Quisiera que al seleccionar alguno y presionar continuar me muestre un alert(), pero no lo logro:

Agradezco cualquier ayuda, soy nuevo en esto.

Acá mi HTML:

<div class="form-check">
  <input class="form-check-input" type="radio" name="servicio" id="radios1" value="option1">
  <label class="form-check-label" for="radios1">
    HTML-CSS
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="servicio" id="radios2" value="option2">
  <label class="form-check-label" for="radios2">
    JavaScript
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="servicio" id="radios3" value="option3">
  <label class="form-check-label" for="radios3">
    Ambos
  </label>
  <br><br>
  <button type="submit" class="btn btn-primary mb-2" onclick="mostrar()">Confirmar</button>

Acá mi JavaScript:

let servicio = document.getElementsByName(servicio);
function mostrar() {
  switch (servicio) {
    case servicio.value:
      alert("Ha seleccionado HTML-CSS");
      break;

    case servicio.value:
      alert("Ha seleccionado JavaScript");
      break;

    case servicio.value:
      alert("Ha seleccionado un servicio completo.");
      break;

    default:
      alert("Por favor, seleccione un servicio.");
  }
}

2 respuestas 2

0

Primero se debe obtener todos los elementos tipo radio y el botón que ejecutará la función que verificará si algún radio fue seleccionado o no. .checked retornará true si el radio ha sido seleccionado, en caso contrario, retornará false.

// obtener los elementos
let servicio1 = document.getElementById("radios1"),
  servicio2 = document.getElementById("radios2"),
  servicio3 = document.getElementById("radios3"),
  confirmar = document.getElementById("confirmar");
  
// funcion para ejecutar el alert
function alertar() {
  if (!servicio1.checked && !servicio2.checked && !servicio3.checked) alert("Por favor, seleccione un servicio");
  if (servicio1.checked) alert("Ha seleccionado HTML-CSS");
  if (servicio2.checked) alert("Ha seleccionado JavaScript");
  if (servicio3.checked) alert("Ha seleccionado un servicio completo");
}

// evento click en el botón
confirmar.onclick = ()=>{
  alertar();
}
<div class="form-check">
    <input class="form-check-input" type="radio" name="servicio" id="radios1" value="option1">
    <label class="form-check-label" for="radios1">
     HTML-CSS
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="servicio" id="radios2" value="option2">
    <label class="form-check-label" for="radios2">
     JavaScript
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="servicio" id="radios3" value="option3">
    <label class="form-check-label" for="radios3">
     Ambos
    </label>
    <br><br>
    <button id="confirmar" type="submit" class="btn btn-primary mb-2" >Confirmar</button>

0

Puede funcionar, pero realizando algunos cambios

Tu solución funcionará si se aplican los siguientes cambios:

Cambiando esta línea:

let servicio = document.getElementsByName(servicio);

Por esta otra:

let servicio = document.getElementsByName("servicio");

Porque servicio será tomado como una variable (además, de no estar previamente inicializada) en lugar de tomarse como una cadena "servicio".

En la estructura switch, en lugar de utilizar:

switch (servicio) {
  case servicio.value:
    // Intrucciones.
    break;

  ...
}

Cámbiala por esta otra:

switch (true) {
  case servicio[0].checked:
    // Intrucciones.
    break;

  ...
}

Además, servicio no es un elemento o un nodo, es una lista nodos [object NodeList].

Ejemplo completo y verificable

En el siguiente ejemplo, he tomado todo el código que has publicado, pero, lo he modificado con las recomendaciones mencionadas anteriormente en esta publicación:

let servicio = document.getElementsByName("servicio");

function mostrar() {
  switch (true) {
    case servicio[0].checked:
      alert("Ha seleccionado HTML-CSS")
      break

    case servicio[1].checked:
      alert("Ha seleccionado JavaScript")
      break

    case servicio[2].checked:
      alert("Ha seleccionado un servicio completo.")
      break

    default:
      alert("Por favor, seleccione un servicio.")

  }
}
<div class="form-check">
  <input class="form-check-input" type="radio" name="servicio" id="radios1" value="option1">
  <label class="form-check-label" for="radios1">
     HTML-CSS
    </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="servicio" id="radios2" value="option2">
  <label class="form-check-label" for="radios2">
     JavaScript
    </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="servicio" id="radios3" value="option3">
  <label class="form-check-label" for="radios3">
     Ambos
    </label>
  <br><br>
  <button type="submit" class="btn btn-primary mb-2" onclick="mostrar()">Confirmar</button>

Note que en la estructura switch he cambiado esta:

case servicio.value:

Por esta otra:

case servicio[0].checked:

Ya que, en caso de que el usuario la seleccione devolverá true.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.