如何在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
,其他的如果点击则不显示。
document.querySelector('input[name="contract_duration"]')
是第一个。使用事件委托代替它。监听所有三个单选按钮的父元素上的change
事件,然后使用事件参数的target
属性来确定哪个单选按钮发生了变化。 - Sebastian Simonchange
事件而不是click
事件。输入框不使用任何 "click",在这方面点击并不重要。 - vsync