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

【问题标题】：jQuery: how to get the index of a checked radio buttonjQuery：如何获取选中的单选按钮的索引
【发布时间】：2011-07-20 17:07:27
【问题描述】：

我最近遇到了一个 StackOverflow 答案，它在 how to get the value of a checked radio button using 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。关于我可能做错的任何想法？

【问题讨论】：

您拥有的选择器将只匹配一个单选按钮。你期待 jQuery 告诉你它的索引 究竟在哪个集合中？
我不确定我是否明白你的意思。我只是想在<form id="myFormID"> 中识别集合radioFieldName 中单选按钮的从零开始的索引。

标签： jquery radio-button

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

【讨论】：

@AspNyc 也许您的选择器不正确。在我的示例中，您为radioButtons 获得了多少物品？这应该包含所有单选按钮控件。如果那是空的，那么您的选择器不正确，无法找到单选按钮。
第一个选择器找到 7 个匹配项，这是正确的：<form id="myFormID"> 中有 7 个 radioFieldName 单选按钮。但是，当我查看radioButtons.find(':checked').length 时，它返回的值是0。
值得注意的一点：当我将find() 更改为filter() 时，radioButtons.filter(':checked').length 返回值1，这很好。此外，当我调用radioButtons.filter(':checked').val() 时，它仍然返回选中的单选按钮的值。但是当我将其更改为radioButtons.filter(':checked').index() 时，它仍然返回-1。
@AspNyc 试试radioButtons.index(radioButtons.filter(':checked'));
index() 未正确用于您的用例。您必须在选择所有输入的选择器上使用索引，而不仅仅是选中的输入。

【解决方案2】：

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

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

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

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

【讨论】：

我正要发布同样的内容...对于给定的元素集合，找到该特定元素的索引。
不幸的是，我仍然得到 -1 值。
@AspNyc - 尝试使用搜索元素而不是选择器的替代方法。请参阅我的更新（以及选择器的简化——除非您有多个包含相同命名元素的表单，否则您可能不需要 #myForm input）。以前的表格我把选择器放在后面。我还将更新一个使用该表单的版本。
您的陈述仍然没有运气。然而，Kelsey 能够弄清楚：radioButtons.index(radioButtons.filter(':checked')); 成功了。

【解决方案3】：

有几个选项：

1) 枚举单选按钮列表（也就是不带 :checked 修饰符）并测试它是否被选中；如果是这样，则您拥有组中元素的 id。

2) 更好的方法 (imo) 是简单地将一些数据与每个元素相关联并提取该数据。因此，如果您给元素一个带有值的“数据索引”属性，那么您可以简单地调用

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

并且具有价值。

【讨论】：

我不想在我的页面上添加任何额外的代码，但如果一切都失败了，我会记住这一点。

【解决方案4】：

使用这个

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

【讨论】：

【解决方案5】：

虽然这是旧的，但试试这个（假设你在单选按钮的点击功能内）

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

【讨论】：

【解决方案6】：

它返回-1，因为您在检查任何单选按钮之前获得了该值。我想你错过了检查你的听众和索引。刚遇到同样的错误，终于找到答案了，我在检查之前得到了索引，请检查你的代码安排，上面的代码是正确的。

【讨论】：