本文介绍如何通过 jQuery 精确获取同一 name 组内被选中的单选按钮在其父容器中的序号（从 0 开始），关键在于定位其外层包裹元素并调用 .index() 方法，而非误用不存在的 nth-child() 属性。

本文介绍如何通过 jquery 精确获取同一 name 组内被选中的单选按钮在其父容器中的序号（从 0 开始），关键在于定位其外层包裹元素并调用 `.index()` 方法，而非误用不存在的 `nth-child()` 属性。

在实际表单开发中，常需根据用户选择的单选按钮位置（如“第几个选项”）执行逻辑分支。但需注意：nth-child() 并非 DOM 元素的属性，不能通过 .attr('nth-child()') 获取；它只是 CSS 伪类，用于样式匹配。正确方式是利用 jQuery 的 .index() 方法——该方法返回当前元素在其同级兄弟元素中的索引位置（从 0 开始）。

针对您提供的 HTML 结构，每个 <input type="radio"> 均嵌套在 <div class="form-check"> 中，且共用 <code>name="1"。要获取已选中项的“第几个”，应定位到其最近的 .form-check 父容器，再调用 .index()：

// ✅ 正确：获取被选中 radio 所在 .form-check 在其兄弟 div 中的索引（0-based）
const selectedIndex = $('input[type="radio"]:checked').closest('div.form-check').index();
console.log(selectedIndex); // 例如：选中 "Second" → 输出 1

⚠️ 注意事项：

• .index() 返回的是 0 起始索引。若需 1 起始的“第 n 个”，请加 1：selectedIndex + 1；
• 确保选择器精准：$('input[type="radio"]:checked') 会匹配所有已选单选按钮，但结合 name 属性可进一步限定作用域（如 $('input[name="1"]:checked')）；
• 若页面存在多个单选组，务必通过 name 或上下文容器（如 $('#myForm')）限定范围，避免跨组误匹配；
• .closest() 向上查找最近的匹配祖先，此处确保定位到正确的 .form-check 容器；若结构变化（如无外层 div），需相应调整选择器。

✅ 补充：若需兼容无包裹结构或追求更健壮写法，可显式筛选同组容器：

jQuery 1.12.4

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

下载

const $group = $('input[name="1"]');
const $checked = $group.filter(':checked');
const indexInGroup = $group.index($checked); // 直接计算在同 name 集合中的位置

此方式不依赖 DOM 层级结构，更具语义鲁棒性。总之，牢记：序号逻辑靠 .index()，而非虚构属性；定位目标靠语义容器或同名集合，而非孤立 input 元素。