如何在JavaScript中正确选择.show类容器下的input单选按钮

你的选择器.show .form-check input[type="radio"]本身是正确的，选不中元素大概率是脚本执行时机不对或者**.show类是动态添加的**（比如Bootstrap折叠组件展开时才会给容器加上show类），导致执行脚本时目标元素还没带上show类。

给你几个可行的解决办法：

1. 确保DOM加载完成后执行脚本 #

把脚本放在页面末尾（</body>标签前），或者用DOMContentLoaded事件监听DOM加载完成：

document.addEventListener('DOMContentLoaded', function() {
  const inputButtons = document.querySelectorAll('.show .form-check input[type="radio"]');
  inputButtons.forEach(input => {
    if (input.checked) {
      alert('hello!');
    }
  });
});

2. 针对动态添加的.show类（比如Bootstrap折叠） #

如果.show类是折叠展开时动态加上的，需要监听折叠展开事件，在类生效后再执行选择逻辑：

// 监听所有折叠容器的展开事件
document.querySelectorAll('.collapse').forEach(collapse => {
  collapse.addEventListener('shown.bs.collapse', function() {
    // 此时当前容器已带有.show类，直接在内部查找单选按钮
    const inputButtons = this.querySelectorAll('.form-check input[type="radio"]');
    inputButtons.forEach(input => {
      if (input.checked) {
        alert('hello!');
      }
    });
  });
});

3. 直接定位当前显示的容器再查找元素 #

先获取带.show类的容器，再在容器内查找单选按钮，避免全局查找的干扰：

const activeContainer = document.querySelector('.collapse.show');
if (activeContainer) {
  const inputButtons = activeContainer.querySelectorAll('.form-check input[type="radio"]');
  inputButtons.forEach(input => {
    if (input.checked) {
      alert('hello!');
    }
  });
}

内容的提问来源于stack exchange，提问作者William