Пометить флажки между выбранными флажками с помощью jquery

У меня есть небольшое сомнение, что я не знаю, как решить.

У меня есть ряд флажков, которые я хочу действовать следующим образом: если 2 из них отмечены, я хочу, чтобы все другие флажки, которые находятся среди уже выбранных, были выбраны.

Например, если вы посмотрите на приложенное изображение, флажки «от 16 до 24» и «от 25 до 34» также должны быть выбраны.

Я также прилагаю код флажков и JS.

Спасибо :)

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;
  	}
  }
};

                                                

  • 3
    задан 29.11.2019, 19:15
    2 ответа

    Это было первое, что пришло мне в голову cГіmo производить, sГ©, который возможно оптимизировать mГЎs, но надеялось, что он подает тебя, как guГ - в, любое сомнение сообщи ее.

    $(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
    ответ дан 01.12.2019, 10:35
    • 1
      ГЕНИАЛЬНЫЙ!! MUCHÍ ПРОПАСТИ СПАСИБО!!! – Andres Romero 30.11.2019, 00:03
    • 2
      Нет, которого, вкуса помогать тебе! :D – Vick Muñoz 30.11.2019, 00:07

    возможно, что он такой простой как...

    $(document).ready(function () {
      if( $('48[]').attr('checked') ) {
        cont++;
      }
      if(cont>=2){
        $("48[]").attr("checked", "checked");
      }
    }
    1
    ответ дан 01.12.2019, 10:35
    • 1
      Спасибо за отвечание, но оно не функционирует :( – Andres Romero 29.11.2019, 18:45
    • 2
      Привет снова André s, такой который я поместил это тебе, не функционирует. Если ты хочешь получить má s помощь, покажи нам твой có я говорю javascript, чтобы мочь ограничивать ответ. – Angel 29.11.2019, 18:49
    • 3
      Факт, я издал мой вопрос añ adiendo có я говорю js – Andres Romero 29.11.2019, 19:16