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

Question

Извините за мой английский. У меня есть несколько таких флажков:

<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

Если я отмечу флажок номер два и флажок номер семь, можно автоматически проверить с помощью JQUERY флажки номер два и номер семь?

<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

Спасибо!

Answer 1

Вы можете использовать pseudo селекторы first и last, а затем цикл между

$('[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

Answer 2

Вот как я мог достичь этого:

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

Answer 3

Совершенно возможно. Вы можете сделать что-то вроде этого (вам потребуется добавить идентификатор к своим входам. Я буду использовать 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);
    }
}

Затем просто используйте clicked на вашем clickмероприятие. Проверьте это: https://jsfiddle.net/7pf45mbz/1/

В некоторых случаях вам может потребоваться использовать prop вместо attr. Тем не менее, для вашего случая использования было бы лучше, если бы вы использовали элемент select с multiple вместо флажков.