本文介绍如何通过 jQuery 精确获取当前选中单选按钮（radio）在其所属分组容器（如 .form-check）中的索引位置（从 0 开始），并纠正常见误区，如误用 nth-child() 伪类或错误定位目标元素。

本文介绍如何通过 jquery 精确获取当前选中单选按钮（radio）在其所属分组容器（如 `.form-check`）中的索引位置（从 0 开始），并纠正常见误区，如误用 `nth-child()` 伪类或错误定位目标元素。

在实际开发中，我们常需根据用户选择的单选按钮动态执行逻辑（例如显示对应内容、提交序号值等）。但需注意：nth-child() 是 CSS 伪类，不是 DOM 属性，不能通过 .attr('nth-child()') 获取；同时，index() 方法返回的是元素在其同级兄弟元素中的位置索引（从 0 开始），而非 CSS 中的 :nth-child(n) 的 1-based 序号。

正确做法是：先定位到被选中的 <input type="radio">，再向上查找其最近的包裹容器（如示例中的 <div class="form-check">），最后调用 <code>.index() 获取该容器在同级 div.form-check 元素中的位置。

✅ 正确代码如下：

// 获取选中 radio 所在 .form-check 容器的索引（0-based）
const selectedIndex = $('input[type="radio"]:checked').closest('div.form-check').index();

// 若需转换为 1-based 序号（如“第1个”“第2个”），可加 1：
const nthPosition = selectedIndex + 1;
console.log(`选中的是第 ${nthPosition} 个选项`); // 输出：选中的是第 2 个选项（若选中 "Second"）

⚠️ 注意事项：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

• $('input[type="radio"]:checked') 必须确保有且仅有一个被选中（单选组天然保证），否则 .closest().index() 将作用于第一个匹配项；
• .closest('div.form-check') 依赖 HTML 结构一致性；若容器类名变更（如改为 radio-item），需同步更新选择器；
• 若存在多个独立单选组（不同 name 值），上述代码默认作用于页面中首个被选中的 radio；如需限定某组，应添加上下文，例如：

  $('#myForm input[name="1"]:checked').closest('.form-check').index();

? 扩展提示：如需直接获取所有 radio 按顺序的值数组，可使用：

const values = $('div.form-check').map((i, el) => $(el).find('input[type="radio"]').val()).get();
// => ["First", "Second", "Third"]

掌握 .closest() 与 .index() 的组合用法，能准确、健壮地实现基于视觉顺序的交互逻辑，避免因混淆 DOM 层级或误用 CSS 概念而导致的定位失效。