3

Necesito ayuda

estoy intentando validar unos checkbox con Js. necesito que al menos uno esté seleccionado para que pueda validar, si no hay selección que arroje un mensaje "Selecciona al menos una casilla".

esos checkbox hacen parte de un formulario con otros tipos de entrada. https://malecoo.000webhostapp.com/ agradezco su ayuda

5
  • 1
    ¿Que avance llevas? Publica el código que has intentado y en dónde tienes el error. Revisa la sección Recorrido para que mejores la forma de preguntar. Saludos.
    – Carlos
    Commented el 14 jun. 2019 a las 0:00
  • puedes verlo explorando el código fuente de la página que está en la url.
    – Cor Mau
    Commented el 14 jun. 2019 a las 0:58
  • uso un getElementById, lo guardo en una variable y aplico el condicional, el problema es que funciona cuando se requiere que todos los checkbox estén todos seleccionados, y necesito que al menos esté seleccionado uno, y cuando ninguno lo esté salga el alert
    – Cor Mau
    Commented el 14 jun. 2019 a las 1:02
  • 2
    Sube el código que llevas hecho y crea un ejemplo mínimo y verificable. La importancia de que subas el código no es solo para la comodidad de los que te vamos a ayudar, sino para dejar constancia para aquellos que vengan después con un problema similar. Si en un año esa web deja de funcionar, no queda constancia alguna del código. Commented el 14 jun. 2019 a las 6:55
  • @CorMau He publicado una respuesta de como pódrias hacerlo, No obstante por favor, edita la pregunta añadiendo un Ejemplo mínimo y verificable como comentan Mikel Ferreiro y Carlos Pozos.
    – x3k
    Commented el 14 jun. 2019 a las 8:52

2 respuestas 2

2

Puedes hacer que en el evento onsubmit de ese formulario realice la validación de los checks:

<form onsubmit="comprobarChecks(event);">

en la función de validar puedes hacer lo siguiente para comprobar si hay un check seleccionado:

function comprobarChecks(event){
    var checkbox = document.getElementsByName('groupCheckbox[]');
    var contador = 0;
    for(var i=0; i< checkbox.length; i++) {
        if(checkbox[i].checked)
            contador++
    }

    //Con JQuery contador=$('[name="groupCheckbox[]"]:checked').length
    if(contador ==0){
        console.log("Obligatorio un check!");
        event.preventDefault();
    }
}

Básicamente lo que hace es contar todos los checkbox que estén seleccionados, y si son 0 sacas tu mensaje y cancelas el evento del submit con: event.preventDefault();

Si Usar JQuery puedes cambiar el siguiente código:

var checkbox = document.getElementsByName('groupCheckbox[]');
var contador = 0;
for(var i=0; i< checkbox.length; i++) {
    if(checkbox[i].checked)
        contador++
}

Por esto:

var contador=$('[name="groupCheckbox[]"]:checked').length

function comprobarChecks(event){
  var checkbox = document.getElementsByName('groupCheckbox[]');
  var contador = 0;
  for(var i=0; i< checkbox.length; i++) {
      if(checkbox[i].checked)
          contador++
  }
  
  //Con JQuery contador=$('[name="groupCheckbox[]"]:checked').length
  if(contador ==0){
    console.log("Obligatorio un check!");
    event.preventDefault();
  }
}
<form onsubmit="comprobarChecks(event);">
  <input type="checkbox" name="groupCheckbox[]" value="1" >
  <input type="checkbox" name="groupCheckbox[]" value="2" >
  <input type="checkbox" name="groupCheckbox[]" value="3" >
  <input type="checkbox" name="groupCheckbox[]" value="4" >

  <input type="submit" value="Enviar" onclick="">
</form>

1
  • Muchas gracias amigo
    – Cor Mau
    Commented el 2 jul. 2019 a las 17:27
0

Si quieres que solo un input se pueda seleccionar puedes usar "radios":

<input type="radio" name="genero">Chico</input>
<input type="radio" name="genero">Chica</input>
<input type="radio" name="genero">Otro</input>

En el caso de que quieras que se puedan seleccionar más, pero mínimo uno, podrías usar este código:

//Defines la función "comprobar"
function comprobar() {
  for (var i = 0; i < document.forms["frm"].length; i++) { //Haces un bucle para cada elemento dentro de un <form id="frm"> en el que previamente has metido los inputs
    if (document.forms["frm"].elements[i].checked) { //Determinas si cada elemento (checkboxes) estan activadas (checked)
      return; //Si hay una sola que esté activada, salir de la funcion "comprobar"
    }
  }
  document.forms["frm"].elements[0].checked = true; // Si se ha acabado el bucle y no se ha salido de la funcion "comprobar" (porque ningún checkbox estaba activado), entonces, activar el primer checkbox del form "frm" (el 1º es 0, el 2º es 1, el 3º es 2...)
}

comprobar(); // Llamar a la funcion por primera vez, ya que los checkboxes suelen estar desactivados al abrir la página
<form id="frm"> <!-- Creas el form que he dicho antes -->
  <input type="checkbox" onchange="comprobar()" name="habilidades">Correr</input> <!-- Input en form, cada vez que se cambia el valor se llama a la funcion "comprobar" (onchange="comprobar()") -->
  <input type="checkbox" onchange="comprobar()" name="habilidades">Saltar</input> <!-- Input en form, cada vez que se cambia el valor se llama a la funcion "comprobar" (onchange="comprobar()") -->
  <input type="checkbox" onchange="comprobar()" name="habilidades">Nadar</input> <!-- Input en form, cada vez que se cambia el valor se llama a la funcion "comprobar" (onchange="comprobar()") -->
</form> <!-- Cierras el form -->

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.