JavaScript ИЛИ jQuery для проверки первых 20 флажков, затем следующих 20 и т. Д.

Question

Возможно ли использовать JavaScript или jQuery для выполнения вышеуказанного?

Я представляю ссылку для каждого, что-то вроде:

<a href=#>Check 1-20</a>
<a href=#>Check 21-40</a>
<a href=#>Check 41-60</a>

и т. Д.

хотя мои чекбоксы генерируются динамически с помощью PHP, как это (у меня их много):

<input type="checkbox" class="checkbox" name="select[]" value="5153"/>
<input type="checkbox" class="checkbox" name="select[]" value="5154"/>
<input type="checkbox" class="checkbox" name="select[]" value="5155"/>

Если у кого-то есть идеи или лучший способ сделать это, это будет оченьоценил:)

Answer 1

Возможно ли использовать JavaScript или jQuery для выполнения вышеуказанного?

Да. Есть много способов сделать это. И если вы можете сделать это в jQuery, вы можете сделать это в «простом» JavaScript, учитывая, что jQuery написан на JavaScript.

Вот один из способов:

$(document).ready(function() {
   var $cbs = $('input:checkbox[name="select[]"]'),
       $links = $("a"); // you probably don't want _all_ links,
                        // so add a class or something.
   $links.click(function() {
      var start = $links.index(this) * 20,
          end = start + 20;
      $cbs.slice(start,end).prop("checked",true);
   });
});

Демо: http://jsfiddle.net/nnnnnn/Q6SxW/

Он берет индекс конкретной ссылки, по которой щелкнули, и использует его для определения диапазона проверяемых флажков, а затем проверяет эти флажки ...

Answer 2

Этот код JQUERY сделает это за вас простым способом.

$('[name="select[]"]').slice(start,end).prop("checked",true);

ПРИМЕРЫ

просто используйте эту функцию. Если вы хотите сначала отметьте 20 , затем

$('[name="select[]"]').slice(0,20).prop("checked",true);

, если хотите установите флажок 30-40 , затем используйте

$('[name="select[]"]').slice(30,40).prop("checked",true);

Answer 3

Есть много способов сделать это.

С вашим текущим HTML лучшим способом будет просто перебрать элементы и выбрать их по отдельности;

function select(start, end) {
    for (var i=start;i<end;i++) {
        $('.checkbox[value="' + i + '"]').prop('checked', true);
    }
}

Хотя этобыло бы намного более эффективным, если бы вы могли добавить уникальный идентификатор для каждого из элементов (имейте в виду, что до HTML5 вы не могли начинать идентификатор с числа, поэтому вам может понадобиться добавить к нему префиксчто-то;

function select(start, end) {
    for (var i=start;i<end;i++) {
        document.getElementById("prefix_" + i).checked = true;
    }
}

С точки зрения того, как динамически сопоставлять <a href=#>Check 1-20</a> с select(1,20), лучшим способом было бы добавить общий класс к гиперссылкам и использовать атрибуты data для установки минимумаи max;

<a href="#" class="highlight" data-min="1" data-max="20">Check 1-20</a>

Тогда:

$(document).on('click', '.highlight', function (e) {
    event.preventDefault();

    var self = $(this);

    select(self.data('min'), self.data('max'));
});

Вы также можете анализировать текст гиперссылки вручную, если хотите (и избегать атрибутов data;

$(document).on('click', 'a', function (e) {
    event.preventDefault();

    var values = $(this).text().match(/ (\d+)-(\d+)/);

    select(parseInt(values[1], 10), parseInt(values[2], 10));
});

Answer 4

Я думаю, это тоже будет работать:

function checkOptions(from, to){
    var checksArray = $(".checkbox input[type=checkbox]");

    for(var i = from; i < to; i++){
        $(checksArray[i]).attr("checked", true);
    }

    return;
}

Answer 5

Вы можете попробовать это:

$('a').click(function() {
    $('.checkbox:gt(' + ($(this).index() * 20) + '):lt(' + (($(this).index() * 20) +21) + ')').attr('checked', 'checked');
});

С этим:

<a href="#">Check 1-20</a>
<a href="#">Check 21-40</a>
<a href="#">Check 41-60</a>



<input type="checkbox" class="checkbox" name="select[]" value="5153"/>
<input type="checkbox" class="checkbox" name="select[]" value="5154"/>
<input type="checkbox" class="checkbox" name="select[]" value="5155"/>

Answer 6

Вы можете сделать это следующим образом.

<a href=# rel="1-20">Check 1-20</a>
<a href=# rel="21-40">Check 21-40</a>
<a href=# rel="41-60">Check 41-60</a>

Я добавил атрибут rel к вашим ссылкам и буду использовать его для поиска элементов.

Присоединить событие клика:

$('#id_of_element_where_links_are a').click(function(){
    var rel = $(this).attr('rel').split('-');
    var start = parseInt(rel[0])-1;
    var end = parseInt(rel[1]);
     //i have start and end element now
     $('input[type="checkbox"]:eq('+start+')').attr('checked', 'checked');
    var ellementTill = $('input[type="checkbox"]:eq('+end+')');
    //now when I have end element I will check all from start to end
    $('input[type="checkbox"]:eq('+start+')').nextUntil(elementTill, "input").attr('checked','checked');

});

Итак, что я сделал, я добавил атрибут rel к ссылкам, а затем использовал их, чтобы получить диапазон: например, 1-20 - от 1 до 20. В конце я уменьшился с одного, потому что элементы проиндексированы с0. Затем я искал конечный элемент и проверял все элементы до конечного элемента.Конечный элемент не будет проверен, поэтому я не уменьшил 20 на 1.

Answer 7

Нет необходимости в цикле, вы можете просто использовать следующее, где X - начальный индекс, а Y - конечный индекс.

 $('input[name='select[]']:gt(X):lt(Y)').attr("checked", true); 

 $('input[name='select[]']:gt(0):lt(20)').attr("checked", true);

Включите это в функцию, аналогичную записи Рори иэто было бы динамично (без зацикливания).