当动态添加的.show类下所有单选框选中时触发JS函数

修正后的JavaScript代码 #

document.querySelectorAll(".question-group").forEach((groupEl) => {
  groupEl.addEventListener("change", (e) => {
    // 仅处理带有.show类的分组
    if (!groupEl.classList.contains("show")) return;

    // 实时获取当前分组内所有.question下的单选框
    const allRadios = groupEl.querySelectorAll(".question .form-check input[type='radio']");

    // 验证所有单选框是否都被选中
    const allChecked = Array.from(allRadios).every(radio => radio.checked);

    if (allChecked) {
      alert("Hello");
    }
  });
});

原代码无效的原因 #

• 静态元素缓存问题：原代码在初始化时就缓存了allRadios集合，若后续动态添加新单选框，这些新元素不会被纳入判断范围，导致校验不完整。
• 缺少.show类校验：原代码未判断当前question-group是否处于.show状态，可能在分组未展开时误触发逻辑。
• 选择器精度不足：原选择器.form-check input[type='radio']可能匹配到分组内非.question下的单选框，而需求仅针对.question下的单选框做校验。

如果你的单选框是动态添加的（比如通过JS生成新的.question项），上述代码依然有效——每次change事件触发时都会重新获取当前页面中存在的目标单选框，无需额外处理动态元素的事件绑定。

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