5个单选输入任意被选中时，如何正确调用change函数？

问题原因 #

你当前代码失效的核心原因是：document.querySelectorAll()返回的是包含所有匹配元素的NodeList集合，并非单个DOM元素，直接给整个集合绑定onclick事件不会对集合内的元素生效。

修正方案 #

修改JS代码如下即可实现需求：

// 精准筛选所有radio类型的单选框，避免匹配到页面其他input元素
let list = document.querySelectorAll("input[type='radio']");
let price = document.getElementById("price");

function change() {
  price.innerHTML = '145';
}

// 遍历所有单选框，逐个绑定状态变更事件
list.forEach(radioItem => {
  radioItem.addEventListener('change', change);
})

优化说明 #

• 用change事件代替click事件，更贴合单选框的交互场景：无论是鼠标点击选中，还是用键盘切换选中状态，都会触发回调，逻辑更严谨
• 选择器增加[type='radio']限定，避免后续页面新增其他类型input时被误绑定事件

如果后续需要根据选中的单选框对应展示不同价格，只需要给每个<input>加value属性，再在change函数内通过this.value拿到选中值做对应计算即可。

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