JQuery срезы и события клика

Question

Вероятно, это действительно простой вопрос jQuery, но я не смог ответить на него через 10 минут в документации, поэтому ...

У меня есть список флажков, и я могу получить их с помощью селектора 'input[type=checkbox]'. Я хочу, чтобы пользователь мог нажимать клавишу Shift и выбирать диапазон флажков. Для этого мне нужно получить индекс флажка в списке, чтобы я мог передать этот индекс в .slice(start, end). Как получить индекс, когда пользователь щелкает поле?

Answer 1

Следующий селектор также должен работать в jQuery: input:checkbox.

Затем можно объединить фильтры :gt(index) и :lt(index), поэтому, если вы хотите установить флажки с 5 по 7, вы должны использовать input:checkbox:gt(4):lt(2).

Чтобы получить индекс установленного в данный момент флажка, просто используйте $("input:checkbox").index($(this)).

Answer 2

Это быстрое решение, но я бы дал каждому флажку уникальный идентификатор, возможно, с указанием индекса, например:

<input id="checkbox-0" type="checkbox" />
<input id="checkbox-1" type="checkbox" />
<input id="checkbox-2" type="checkbox" />
<input id="checkbox-3" type="checkbox" />
<input id="checkbox-4" type="checkbox" />

Вы можете легко получить индекс:

$(document).ready(function() {
  $("input:checkbox").click(function() {
    index = /checkbox-(\d+)/.exec(this.id)[1];
    alert(index);
  });
});

Answer 3

@ Gorgapor: Я думаю, мне иногда нужно задавать вопросы чуть менее буквально. :-) Я подумал, что вы были привязаны к требованию какого-то индекса. Я думаю, вы обнаружите, что, поскольку вы больше используете jQuery, вам обычно не нужно делать такие вещи.

Answer 4

Спасибо за ответ, Самьюдсон.

После дальнейших экспериментов я обнаружил, что вы можете даже использовать $(':checkbox'), чтобы выбрать их. Интересно, что вы можете использовать функцию .slice(), чтобы получить диапазон, но у вас также есть возможность сделать это в селекторе с :gt и :lt. Я нахожу синтаксис .slice() более чистым, чем использование фильтров выбора.

Я должен сказать, что мне не очень нравится решение Райана Даффилда, потому что оно требует изменений в разметке и предполагает повторение кода.