0

Tengo un formulario con una serie de accesorios para un hotel, y los almaceno en un array llamado accesorios[].

El código es:

<label for="accesorios">Accesorios:</label><br/>
<label for="secador">Secador:</label>
    <input type="checkbox" id="secador" name="accesorios[]" value="1" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="calefaccion">Calefaccion: </label>
    <input type="checkbox" id="calefaccion" name="accesorios[]" value="2" />
<br/><br/>
<label for="jacuzzi">Jacuzzi: </label>
    <input type="checkbox" id="jacuzzi" name="accesorios[]" value="3" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="tv">TV: </label>
    <input type="checkbox" id="tv" name="accesorios[]" value="4" />
<br/><br/>
<label for="internet">Internet: </label>
    <input type="checkbox" id="internet" name="accesorios[]" value="5" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="microondas">Microondas: </label>
    <input type="checkbox" id="microondas" name="accesorios[]" value="6" />

¿Cómo compruebo que debe marcar al menos un checkbox desde Javascript o jQuery?

Código Javascript:

function validar_formulario_cabana(){
    var nombre, descripcion, precio, imagen, accesorios;

    nombre = document.getElementById("nombre").value;
    descripcion = document.getElementById("descripcion").value;
    precio = document.getElementById("precio").value;
    imagen = document.getElementById("precio").value;
    accesorios = document.getElementById("anadir_cabana").checkbox; //Array.

    var contar = 0; //Variable que lleva la cuenta de los checkbox pulsados.

    for (var x=0; x<accesorios.length; x++) {
        if (accesorios[x].checked) {
            contar = contar + 1;
        }
    }

    if(nombre=="" || descripcion=="" || precio=="" || imagen==""){
        alert("Todos los campos son obligatorios.");
        return false;
    }else if(nombre.length>50){
        alert("El nombre debe tener menos de 51 carácteres.");
        document.getElementById("nombre").focus();
        document.getElementById("nombre").value="";
        return false;
    }else if(descripcion.length>200){
        alert("La descripción superan los 200 carácteres de límite.");
        document.getElementById("descripcion").focus();
        document.getElementById("descripcion").value="";
        return false;
    }else if(precio.value>99999){
        alert("El precio de la cabaña no está en el rango establecido.");
        document.getElementById("precio").focus();
        document.getElementById("precio").value="";
        return false;
    }else if(contar<1){
        alert("¡Debes activar al menos un accesorio!");
        document.getElementById("precio").focus();
        document.getElementById("precio").value="";
        return false;
    }
}
7
  • getElementsByTagName se usa seleccionar por nombre de etiqueta, porque tienes "accesorios" si no es una etiqueta? Usas una libreria?
    – loki
    Commented el 7 ene. 2018 a las 16:49
  • Utiliza las herramientas de desarrollo del navegador que estés utilizando. Por ejemplo tienes getElemetById('nombre') pero no tienes ningún id con 'nombre'.
    – loki
    Commented el 7 ene. 2018 a las 18:51
  • En tu html solo tienes checkboxes y en el js tienes text inpus o areas.
    – loki
    Commented el 7 ene. 2018 a las 18:53
  • Cuando quieres hace document.getElementById("nombre").value; marca error ya que no hay un id "nombre".
    – loki
    Commented el 7 ene. 2018 a las 19:01
  • No me queda claro que es lo intentas realizar si el js no hace referencia al html que muestras. La respuesta de abajo funciona para validar que haya por lo menos un checkbox activado, sólo te faltaría validar lo demás.
    – loki
    Commented el 7 ene. 2018 a las 19:08

2 respuestas 2

2

Buenas, puedes usar querySelectorAll para que te devuelva un nodelist de los que están marcados, y si es mayor de 0 ejecutar tú código.

 function validar_formulario_cabana() {
    const accesorios = document.querySelectorAll('input[type=checkbox]:checked'); 
    if(accesorios.length <= 0){
      console.log("no se encuentra ningún checkbox marcado")
      return;
    }
  // tu código
  }
  <label for="accesorios">Accesorios:</label>
  <br/>
  <label for="secador">Secador:</label>
  <input type="checkbox" id="secador" name="accesorios[]" value="1" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <label for="calefaccion">Calefaccion: </label>
  <input type="checkbox" id="calefaccion" name="accesorios[]" value="2" />
  <br/>
  <br/>
  <label for="jacuzzi">Jacuzzi: </label>
  <input type="checkbox" id="jacuzzi" name="accesorios[]" value="3" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <label for="tv">TV: </label>
  <input type="checkbox" id="tv" name="accesorios[]" value="4" />
  <br/>
  <br/>
  <label for="internet">Internet: </label>
  <input type="checkbox" id="internet" name="accesorios[]" value="5" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <label for="microondas">Microondas: </label>
  <input type="checkbox" id="microondas" name="accesorios[]" value="6" />
  <button onclick="validar_formulario_cabana()">comprobar</button>

1

Aquí tienes una funcion:

var check = e => Array.from(document.getElementsByTagName(e)).filter(cur => cur.checked).length > 0;
  • Explicacion: Crea un array a través de un objeto iterable, luego lo filtro con el método filter, cuya condición es que el nodo se encuentre chequeado. Si el array devuelto tiene longitud mayor a 0 es porque almenos 1 elemento se chequeó.

Y la podrás usar así:

var check = e => Array.from(document.getElementsByTagName(e)).filter(cur => cur.checked).length > 0;


chec.onclick = function() {
 if(!check("input")) alert("No se ha chequeado un checkbox");
 else alert("Se ha chequeado almenos un input");
};
Solo rojo: <input type="checkbox">
Solo verde <input type="checkbox">

<input type="button" value="Comprobar chequeados" id=chec />

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.