如何在普通 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 function 仅返回与选择器匹配的所有元素的第一个元素 - 因此是您的问题。 您需要改用querySelectorAll 。 这将返回所有匹配的元素 - 然后您可以遍历它们以向每个元素添加一个事件侦听器。

此外，这种情况下的最佳实践是听“更改”事件而不是“点击”，然后当用户点击已经选择的收音机时，它不会不必要地触发。

演示：

 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>

Answer 2

您需要改用querySelectorAll ，它返回元素列表。

并且change事件将仅针对选定的收音机运行。

 let contact = document.querySelectorAll('input[name="contract_duration"]'); // or '.your_radio_class_name' for (let i = 0; i < contact.length; i++) { contact[i].addEventListener("change", function() { let val = this.value; // this == the clicked radio, console.log(val); }); }

 label { display: block; }

 <label> <input name="contract_duration" type="radio" value="6-Months"/> <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>

Answer 3

您的代码的问题是querySelector只返回第一个匹配的元素。 如果您想要所有事件侦听器，您应该使用querySelectorAll并循环遍历元素。

像这样：

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