javascript - 如何在纯 Javascript 中的单选按钮上使用 addEventListener？

Question

如何在我的 html 中的单选按钮上附加事件监听器？考虑这种形式:

<label>
    <input name="contract_duration" type="radio" value="6-Months" {{ $contract && $contract->contract_duration === '6-Months' ? 'checked' : ''  }} />
    <span>6-Months</span>
</label>

<label>
    <input name="contract_duration" type="radio" value="1-Year" {{ $contract && $contract->contract_duration === '1-Year' ? 'checked' : ''  }} />
    <span>1-Year</span>
</label>

<label>
    <input name="contract_duration" type="radio" value="2-Years" {{ $contract && $contract->contract_duration === '2-Years' ? 'checked' : ''  }} />
    <span>2-Years</span>
</label>

这是我的 Javascript:

if(document.querySelector('input[name="contract_duration"]')){
    document.querySelector('input[name="contract_duration"]').addEventListener("click", function(){
        var item = document.querySelector('input[name="contract_duration"]').value;
        console.log(item);
    });
}

在执行过程中，我的代码只记录第一个，即 6-Months，如果点击没有显示其他内容。

Answer 1

querySelector函数只返回与选择器匹配的所有元素的第一个元素 - 因此你的问题。您需要使用 querySelectorAll反而。这将返回所有匹配的元素 - 然后您可以遍历它们以向每个元素添加一个事件监听器。

此外，在这种情况下，最佳做法是监听“更改”事件而不是“点击”事件，这样当用户点击一个已选择的 radio 时它就不会不必要地触发。

演示:

if (document.querySelector('input[name="contract_duration"]')) {
  document.querySelectorAll('input[name="contract_duration"]').forEach((elem) => {
    elem.addEventListener("change", function(event) {
      var item = event.target.value;
      console.log(item);
    });
  });
}

<label>
    <input name="contract_duration" type="radio" value="6-Months" checked />
    <span>6-Months</span>
</label>

<label>
    <input name="contract_duration" type="radio" value="1-Year" />
    <span>1-Year</span>
</label>

<label>
    <input name="contract_duration" type="radio" value="2-Years" />
    <span>2-Years</span>
</label>