<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>
<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>
<input class="cityName" id="locationName" type="text" value="" />
所以基本上,这是我的html。我现在想做的是,每当单击单选按钮时,都使用JavaScript(而不是jQuery)清除文本输入字段(如果以前输入过什么),并在有人单击文本字段时取消选中单选按钮。我很快找到了jQuery解决方案,但得到了使用JavaScript代替的任务。由于我对JS的经验不足,因此无法将其缠住以使其正常工作。
有什么想法吗? 非常感谢。
答案 0 :(得分:1)
您可以使用.querySelectorAll()和.querySelector()来查找元素,并使用.addEventListener()来附加事件处理程序:
document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
ele.addEventListener('change', function(e) {
document.querySelector('#locationName').value = '';
});
});
document.querySelector('#locationName').addEventListener('input', function(e) {
document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
ele.checked=false;
});
})
<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>
<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>
<input class="cityName" id="locationName" type="text" value="" />