javascript - jQuery 切片和点击事件

Question

这可能是一个非常简单的 jQuery 问题，但在文档中 10 分钟后我无法回答，所以......

我有一个复选框列表，我可以使用 selector 获取它们'input[type=checkbox]'。我希望用户能够单击并选择一系列复选框。为此，我需要获取列表中复选框的索引，以便可以将该索引传递给.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

这是一个快速的解决方案，但我会给每个复选框一个唯一的 ID，可能带有索引提示，如下所示：

<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

谢谢你的回答，萨姆朱德森。

经过进一步的实验，我发现你甚至可以使用just$(':checkbox')来选择它们。有趣的是，您可以使用该.slice()函数来获取范围，但您也可以选择在选择器中使用:gtand来执行此操作:lt。不过，我确实发现 of 的语法.slice()比使用选择器过滤器更干净。

我不得不说我不太喜欢 Ryan Duffield 的解决方案，因为它需要更改标记，并且涉及重复代码。

Answer 4

@Gorgapor：我想我有时需要少一点字面意思。:-) 我认为您被锁定为需要某种索引。我想你会发现，当你更多地使用 jQuery 时，你通常不需要做那种事情。