4

tengo una pequeña duda que no sé cómo resolver.

Tengo una serie de checkboxes que quiero que actúen de la siguiente manera: si 2 de ellos están checked, quiero que se seleccionen todos los demás checkboxes que se encuentren entre los ya seleccionados.

Por ejemplo, si miráis la imagen adjunta, también deberían seleccionarse los checkboxes de "16 a 24" y "25 a 34".

Adjunto también el código de los checkboxes y del js.

Gracias :)

introducir la descripción de la imagen aquí

function checkBox() {
  for (var i = 0; i <= $('48[]').length - 1; i++) {
  	var cont = 100;

  	if ($('48[i]').attr('checked')) {

  		if (i > cont) {

  				for (var x = cont + 1; x < i; x++) {
  				$('48[x]').prop("checked", true);
  			}
  		}

  		cont = i;
  	}
  }
};
<span>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_1" name="48[]" type="checkbox" onchange="checkBox()" value="1 a 5">
                                                   <br><label class="custom-control-label" for="customCheck_Publico_objertivo_1"> 1 a 5</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_2" name="48[]" type="checkbox" onchange="checkBox()" value="6 a 10">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_2"> 6 a 10</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_3" name="48[]" type="checkbox" onchange="checkBox()" value="11 a 15">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_3"> 11 a 15</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_4" name="48[]" type="checkbox" onchange="checkBox()" value="16  a 24">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_4"> 16 a 24</label>
                                                </li>
                                             </span>
                                             <span>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_5"name="48[]" type="checkbox" onchange="checkBox()" value="25 a 34">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_5"> 25 a 34</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_6" name="48[]" type="checkbox" onchange="checkBox()" value="35 a 44">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_6"> 35 a 44</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_7" name="48[]" type="checkbox" onchange="checkBox()" value="45 a 54">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_7"> 45 a 54</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_8" name="48[]" type="checkbox" onchange="checkBox()" value="55 a  64">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_8"> 55 a 64</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_9" name="48[]" type="checkbox" onchange="checkBox()" value="+ 65">
                                                   <label  class="custom-control-label" for="customCheck_Publico_objertivo_9">  + 65</label>
                                                </li>
                                             </span>

1

2 respuestas 2

4

Fue lo primero que se me vino a la mente de cómo generarlo, sé que se puede optimizar más, pero espero te sirva como guía, cualquier duda hazla saber.

$(document).ready(function(){
 
 //creamos un arreglo para guardar los dos primeros numeros
let arr_numeros = new Array();

//agregamos la funcion change para capturar la info del elemento presionado
$('input[name="48[]"]').change(function(){

//seleccionamos todos los checks esto trae un HTMLCollections
let todosCheck = $('input[name="48[]"]');
//creo un array donde voy a guardar 0, 1
let arr_check = new Array();
//por tal motivo hay que recorrerlo
for(let i = 0; i<todosCheck.length; i++){
      //mientras se seleciconen se agregan 1
    if($(todosCheck[i]).prop('checked')){
      
        arr_check.push(1);
        //si no agregamos 0
    }else{
        arr_check.push(0);
    }

}

//validamos que si no hay ninguno seleccionado reseteamos el arreglo de números
//ya que si seleccionamos todos y luego deseleccionamos todos se queda agregado
//un valor en el array entonces al oprimir por ejemplo 35-44 se vana seleccionar del 1 hasta ese elemento cuando no debería de ser así. 
if(arr_check.indexOf(1) == -1){
    arr_numeros = [];
}

//obtenemos el número final del id de dicho elemento
   let numero = this.id.substr(-1);
   //validamos que solo entre cuando seleccione
   if($(this).prop('checked')){
   //insertamos los números
   arr_numeros.push(numero);
 console.log(arr_numeros)
 
 //validamos que el array contenga dos valores osea que haya pulsado dos checkbx
 if(arr_numeros.length >= 2){
 //obtenemos el ultimo valor
 let ultimo = arr_numeros.pop();
 
 //aquí ocurre que si el usuario selecciona por ejemplo un valor 9, 5
 //entonces tienes que usar un for que cuente hacia atras
 if(arr_numeros[0] > ultimo){
 //console.log(arr_numeros[0], ultimo)
  for(let j = arr_numeros[0]; j > ultimo; j--){
  
  //console.log(j);

//si estan seleccionados no hacemos nada
//usando string literals podemos hacer una concatenación de el nombre de tu id
//más el número que los hace diferentes así por cada iteración valida si esta check
 if($(`#customCheck_Publico_objertivo_${j}`).prop('checked')){

  }else{
  
  //si no les agregamos el atributo checked
    $(`#customCheck_Publico_objertivo_${j}`).prop("checked", true); 
   

  }
 
 }
 
 }else{
 
 //lo mismo pero ahora el for es incremental
 
 for(let i = arr_numeros[0]; i < ultimo; i++){
  console.log($(`#customCheck_Publico_objertivo_${i}`).attr('id'));
 if($(`#customCheck_Publico_objertivo_${i}`).prop('checked')){

      
  }else{
    $(`#customCheck_Publico_objertivo_${i}`).prop("checked", true); 
    
  }
 
 }
 
 }


  }
   }else{
   //arr_numeros = [];
   }
   
 

console.log(arr_numeros);

})



})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_1" name="48[]" type="checkbox" value="1 a 5">
                                                   <br><label class="custom-control-label" for="customCheck_Publico_objertivo_1"> 1 a 5</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_2" name="48[]" type="checkbox" value="6 a 10">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_2"> 6 a 10</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_3" name="48[]" type="checkbox" value="11 a 15">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_3"> 11 a 15</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_4" name="48[]" type="checkbox" value="16  a 24">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_4"> 16 a 24</label>
                                                </li>
                                             </span>
                                             <span>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_5"name="48[]" type="checkbox" value="25 a 34">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_5"> 25 a 34</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_6" name="48[]" type="checkbox" value="35 a 44">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_6"> 35 a 44</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_7" name="48[]" type="checkbox" value="45 a 54">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_7"> 45 a 54</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_8" name="48[]" type="checkbox" value="55 a  64">
                                                   <label class="custom-control-label" for="customCheck_Publico_objertivo_8"> 55 a 64</label>
                                                </li>
                                                <li><input class="custom-control-input" id="customCheck_Publico_objertivo_9" name="48[]" type="checkbox" value="+ 65">
                                                   <label  class="custom-control-label" for="customCheck_Publico_objertivo_9">  + 65</label>
                                                </li>
                                             </span>

2
  • GENIAL!! MUCHÍSIMAS GRACIAS!!! el 29 nov. 2019 a las 22:03
  • No hay de que, un gusto ayudarte! :D el 29 nov. 2019 a las 22:07
1

puede que sea tan simple como...

$(document).ready(function () {
  if( $('48[]').attr('checked') ) {
    cont++;
  }
  if(cont>=2){
    $("48[]").attr("checked", "checked");
  }
}

3
  • 1
    Gracias por contestar, pero no funciona :( el 29 nov. 2019 a las 16:45
  • 1
    Hola de nuevo Andrés, tal cual te lo he puesto no funciona. Si quieres recibir más ayuda, muestranos tu código javascript, para poder acotar la respuesta.
    – Fergush
    el 29 nov. 2019 a las 16:49
  • 1
    Hecho, he editado mi pregunta añadiendo el código js el 29 nov. 2019 a las 17:16

Tu Respuesta

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

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