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

如何在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。

最佳答案

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>