jQuery slicing and click events

Question

This is probably a really simple jQuery question, but I couldn't answer it after 10 minutes in the documentation so...

I have a list of checkboxes, and I can get them with the selector 'input[type=checkbox]'. I want the user to be able to shift-click and select a range of checkboxes. To accomplish this, I need to get the index of a checkbox in the list, so I can pass that index to .slice(start, end). How do I get the index when the user clicks a box?

Answer 1

The following selector should also work in jQuery: input:checkbox.

You can then string the :gt(index) and :lt(index) filters together, so if you want the 5th to 7th checkboxes, you'd use input:checkbox:gt(4):lt(2).

To get the index of the currently clicked checkbox, just use $("input:checkbox").index($(this)).

Answer 2

This is a quick solution, but I would give each checkbox a unique ID, perhaps with an index hint, like so:

<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" />

You can then easily obtain the index:

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