Lo siento por mi ingles. Tengo varias casillas de verificación como estas:

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

Si marco la casilla de verificación número dos y la casilla de verificación número siete, ¿es posible marcar automáticamente con JQUERY las casillas de verificación del número dos y el número siete?

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" checked />2
<input type="checkbox" name="data[]" value="3" checked />3
<input type="checkbox" name="data[]" value="4" checked />4
<input type="checkbox" name="data[]" value="5" checked />5
<input type="checkbox" name="data[]" value="6" checked />6
<input type="checkbox" name="data[]" value="7" checked />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

¡Gracias!

0
Giuseppe 30 oct. 2019 a las 14:54

3 respuestas

La mejor respuesta

Así es como podría lograr eso:

var checked = [];
$(":checkbox").click(function() {
    if (!$(this).is(':checked')) {
       // Optional sanity
       // if you wish to make user available to uncheck 
       return;
    }
    var min = $(':checkbox:checked:first').val();
    var max = $(':checkbox:checked:last').val();
    for (var index = Number(min)+1; index < Number(max); index++) {
      $(`[type="checkbox"][value='${index}']`).prop("checked", true);
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
1
Bilal Siddiqui 30 oct. 2019 a las 12:44

Perfectamente posible. Podría hacer algo como esto (requerirá que agregue una identificación a sus entradas. Usaré myCheck):

let first = null;

function clicked(event) {
    if(first) {
        let second = parseInt(event.target.value, 10);

        let a = first < second ? first : second;
        let b = first < second ? second : first;

        for(let i = a; i <= b; i++) {
            $('#myCheck[value="' + i + '"]').attr('checked', true);
        }

        first = null;
    }
    else {
        first = parseInt(event.target.value, 10);
    }
}

Luego, simplemente use clicked en su evento click. Compruébalo: https://jsfiddle.net/7pf45mbz/1/

En algunos casos, es posible que deba usar prop en lugar de attr. Sin embargo, para su caso de uso, probablemente sería una mejor experiencia de usuario si utilizara un elemento select con multiple en lugar de casillas de verificación.

0
Ayrton 30 oct. 2019 a las 12:12

Puede usar los selectores pseudo first y last y realizar un ciclo entre ellos

$('[type="checkbox"]:checkbox').change(function() {
  var first = $('[type="checkbox"]:checked:first').val();
  var last = $('[type="checkbox"]:checked:last').val();
  for(var i = first; i <= last; i++){
    $('[type="checkbox"][value="'+i+'"]').prop( "checked", true );
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
2
Ram Segev 30 oct. 2019 a las 12:40