jQuery：如何获取选中单选按钮的索引

Question

最近我看到了一个StackOverflow的回答，提供了优秀的指导如何使用jQuery获取选中的单选按钮的值:

var radioVal = $("#myFormID input:radio[name='radioFieldName']:checked").val();
alert('Selected radio button value = ' + radioVal);

现在我正在尝试查找选中的单选按钮的从零开始的索引。我以为这相对简单：

var radioIdx = $("#myFormID input:radio[name='radioFieldName']:checked").index();

然而，radioIdx 总是返回 -1。你有什么想法我可能做错了什么吗？

- Mass Dot Net

---

你所拥有的选择器只匹配一个单选按钮。你期望jQuery告诉你它在哪个集合中的索引？ - Jon

不确定我是否理解你的意思。我只是试图确定在 <form id="myFormID"> 中的 radioFieldName 集合中单选按钮的从零开始的索引值。 - Mass Dot Net

Answer 1

这应该可以工作。你可以在一行中完成它，但我将其分成几行以使其更易于阅读：

var radioButtons = $("#myFormID input:radio[name='radioFieldName']");
var selectedIndex = radioButtons.index(radioButtons.find(':checked'));

编辑：验证您的选择器是否正确。逐步分解它：

var radioButtons = $("#myFormID input:radio[name='radioFieldName']");

// this should contain the count of all your radio buttons
var totalFound = radioButtons.length;

// this should contain the checked one
var checkedRadioButton = radioButtons.find(':checked');

// this should get the index of the found radio button based on the list of all
var selectedIndex = radioButtons.index(checkedRadioButton);

这些步骤中哪一个没有产生预期的值？

编辑：显示最终解决方案

var radioButtons = $("#myFormID input:radio[name='radioFieldName']");
var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));

- Kelsey

---

@AspNyc，也许您的选择器不正确。在我的示例中，您对radioButtons获取了多少个项目？这应该包含您所有的单选按钮控件。如果为空，则表示您的选择器无法找到单选按钮。 - Kelsey

第一个选择器找到了7个匹配项，这是正确的：在 <form id="myFormID"> 中有7个名为 radioFieldName 的单选按钮。然而，当我查看 radioButtons.find(':checked').length 时，它返回一个值为 0 的值。 - Mass Dot Net

有一件值得注意的事情：当我将 find() 更改为 filter() 时，radioButtons.filter(':checked').length 返回一个值为 1 的结果，这是好的。此外，当我调用 radioButtons.filter(':checked').val() 时，它仍然返回所选单选按钮的值。但是，当我将其更改为 radioButtons.filter(':checked').index() 时，它仍然返回 -1。 - Mass Dot Net

@AspNyc 尝试使用 radioButtons.index(radioButtons.filter(':checked'));。 - Kelsey

index() 在您的用例中被错误地使用。您必须在选择所有输入的选择器上使用 index，而不仅仅是选中的那些。 - JD Smith

Answer 2

尝试使用index的一种形式，它允许您指定集合中的元素并返回其相对位置：

var radioIdx = $(":radio[name='radioFieldName']")
                    .index($(":radio[name='radioFieldName']:checked")); 

或者是找到另一个集合中与选择器匹配的第一个项并报告它在第二个集合中的位置的版本。

var radioIdx = $(":radio[name='radioFieldName']:checked")
                   .index(":radio[name='radioFieldName']");

- tvanfosson

---

我正要发布同样的内容...对于给定的元素集合，找到特定元素的索引。 - Mayo

不幸的是，我仍然得到了一个-1的值。 - Mass Dot Net

@AspNyc - 尝试使用搜索元素而不是选择器的替代方法。请查看我的更新（以及简化您的选择器--除非您有包含相同命名元素的多个表单，否则您可能不需要#myForm input）。我之前的表单选择器是反向的。我还将提供使用该表单的版本的更新。 - tvanfosson

仍然没有运行你的语句。不过，Kelsey能够弄清楚： radioButtons.index（radioButtons.filter（'：checked'））;解决了问题。 - Mass Dot Net

Answer 3

有几个选项：

1）枚举单选按钮列表（即没有:checked修饰符），并测试是否已选中；如果是，则具有该组中元素的id。

2）更好的方法（在我看来），是简单地将一些数据与每个元素关联起来并提取该数据。因此，如果您为元素赋予“data-index”属性及其值，则可以简单地调用

$('#myFormID input:radio[name='radioFieldName']:checked').data('index')

并赋予数值。

- Tejs

---

如果其他方法都失败了，我会考虑添加额外的代码到我的页面，但我更愿意不这样做。 - Mass Dot Net

Answer 4

使用这个。

    alert($("input[name=checkname]:checked").map(function () {return this.value;}).get().join(","));

- atabak

Answer 5

虽然这是旧的，但尝试一下（假设您在单选按钮的单击函数内部）

$('#myFormID input:radio[name=radioFieldName]').click(function(){
  var index = $('#myFormID input:radio[name=radioFieldName]').index(this);
  alert(index);
});

- Obi

Answer 6

它返回-1是因为您在任何单选按钮被选中之前获取了值。我认为您错过了监听器和索引检查的位置。我刚刚遇到了同样的错误，但最终找到了答案，我在任何事情被选中之前获取了索引，请检查您的代码排列，上面的代码是正确的。

- Bhimbim