本文介绍如何通过 jQuery 准确获取当前选中单选按钮（radio）在其所属分组容器中的序号（即第几个子元素），关键在于理解 nth-child 的语义与 .index() 方法的正确用法。

本文介绍如何通过 jquery 准确获取当前选中单选按钮（radio）在其所属分组容器中的序号（即第几个子元素），关键在于理解 `nth-child` 的语义与 `.index()` 方法的正确用法。

在实际开发中，我们常需根据用户选择的单选按钮位置执行不同逻辑（例如切换对应面板、记录选项顺序等）。但需注意：nth-child 并非 DOM 元素的属性，而是一个 CSS 伪类；因此 attr('nth-child()') 是无效写法，会返回 undefined。

正确的做法是利用 jQuery 的 .index() 方法——它返回当前元素在其同级兄弟元素中的零基索引（0-indexed）。由于你的 HTML 结构中每个 <input type="radio"> 都嵌套在独立的 <div class="form-check"> 中，因此应定位到该 <code>div 容器，再调用 .index()：

// ✅ 正确：获取选中 radio 所在 .form-check 容器的索引（从 0 开始）
const selectedIndex = $(":radio:checked").closest("div.form-check").index();

// 若需 1-based 索引（如“第1个”“第2个”），可 +1
const nthChildNumber = selectedIndex + 1;
console.log(`选中的是第 ${nthChildNumber} 个选项`);

⚠️ 注意事项：

jQuery 1.12.4

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

下载

• .index() 返回的是相对于最近匹配的父级同辈容器的位置，因此必须确保 closest("div.form-check") 能唯一、准确地定位到目标包裹层；
• 若页面存在多个 radio 组（不同 name），建议限定作用域，避免误匹配：

  // 更健壮：限定在 name="1" 的组内查找
  const selectedIndex = $("input[name='1']:checked").closest(".form-check").index();

• 若未选中任何 radio，:radio:checked 将返回空集合，此时 .index() 返回 -1，建议增加判断：

  const $checked = $("input[name='1']:checked");
  const nth = $checked.length ? $checked.closest(".form-check").index() + 1 : null;

总结：不要尝试读取不存在的 nth-child() 属性；而是借助语义清晰的 DOM 层级关系，用 .closest() 上溯至逻辑上的“选项容器”，再用 .index() 获取其自然序位——这是语义化、可维护且兼容性良好的实践方式。