如何在 JavaScript 中选择具有特定 CSS 类的输入单选按钮

Question

我正在尝试使用 JavaScript 在 HTML 中的 .show 类下选择输入单选按钮。 HTML 结构如下：

html:

<div class="collapse question-group show">
  <div class="progress">...</div>
  <div class="question">
    <div class="form-check">
      <input type="radio">
      <label>yes</label>
    </div>
  </div>
</div>

我需要在 CSS 选择器中包含 .show 类，因为还有其他类似的 div 组，唯一的区别是 .show 类的存在。没有它，该元素将被隐藏。

我尝试使用以下 JavaScript 代码：

<script>
  var inputButtons = document.querySelectorAll('.show .form-check input[type="radio"]');
  inputButtons.forEach(input => {
    if (input.checked) {
      alert('hello!');
    }
  })
</script>

但是警报窗口并没有弹出，看来选择失败了。

如果我将 CSS 路径更改为：

var inputButtons = document.querySelectorAll('.form-check input[type="radio"]');

它按预期工作。

有没有办法在 CSS 选择器中包含 .show 类来选择所需的输入单选按钮？

Answer 1

问题根据进度动态添加！

然后尝试：

document.querySelectorAll('.show')
  .forEach((showEl) => {
    showEl.addEventListener('change', (event) => {
      if(event.target.tagName === 'INPUT' && event.target.type === 'radio' && event.target.checked){
        alert('Hello')
      }
    })
  })

因此，事件处理程序与 static

.show

元素相关联...然后，每当其子元素之一发生单击事件（无论是否动态创建）时，该事件都会触发，因为它仍然与现有元素。诀窍是过滤你想与之互动的孩子。