jQuery 切片和点击事件答案

【问题标题】：jQuery slicing and click eventsjQuery 切片和点击事件
【发布时间】：2010-09-07 19:30:44
【问题描述】：

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

我有一个复选框列表，我可以使用选择器'input[type=checkbox]' 获取它们。我希望用户能够单击并选择一系列复选框。为此，我需要获取列表中复选框的索引，以便将该索引传递给.slice(start, end)。用户点击框时如何获取索引？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

以下选择器也应该在 jQuery 中工作：input:checkbox。

然后您可以将 :gt(index) 和 :lt(index) 过滤器串在一起，因此如果您想要第 5 到第 7 个复选框，您可以使用 input:checkbox:gt(4):lt(2)。

要获取当前点击的复选框的索引，只需使用$("input:checkbox").index($(this))。

【讨论】：

【解决方案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);
  });
});

【讨论】：

【解决方案3】：

谢谢你的回答，samjudson。

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

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

【讨论】：

【解决方案4】：

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

【讨论】：