是否有一些内置功能，例如用于无线电输入的 onclick？

Question

我有三个无线电输入，我想让无线电输入返回inputs u 的值，并在用户选择一个选项时执行一个函数。

代码如下：

console.log(document.querySelector('input[name="radios"]:checked').value);

 <form>
 <input type="radio"  id='HTML'name="radios" value="HTML">HTML<br>
<input type="radio" id="css" name="radios"  value="CSS">CSS<br>
<input type="radio" id="javascript" name="radios" value="JavaScript">Javascript<br>
</form>

感谢Parthik Gosar 的回答，我可以从radio input 获得价值。

但问题是document.querySelector('input[name="radios"]:checked').value 将在页面加载后从radio input 获取值，即null。

我只是想知道是否有一些类似于onclick 的内置函数，当用户选择一个选项或其他解决问题的方法时它会执行一个函数？

感谢您的回复！

*我知道我们可以使用document.getElementById('').checked来检查，但是它会在页面加载时执行该函数，这对我不起作用。，

Answer 1

您正在寻找点击监听器。只需将一个侦听器附加到表单元素（event delegation 允许您将侦听器添加到父元素并在子元素“冒泡”DOM 时从子元素捕获事件），然后获取单击按钮的值并记录它.

const form = document.querySelector('form');

form.addEventListener('click', handleClick, false);

// Because you're using event delegation the parent
// will watch for _all_ events from its children.
// So if you only want to watch for events from
// just the input buttons you need to grab the nodeName
// of the clicked element and then check to see if
// it's an input button before you do anything else
function handleClick(e) {
  const { nodeName, value } = e.target;
  if (nodeName === 'INPUT') {
    console.log(value);
  }
}

<form>
  <input type="radio" id='HTML' name="radios" value="HTML">HTML<br>
  <input type="radio" id="css" name="radios" value="CSS">CSS<br>
  <input type="radio" id="javascript" name="radios" value="JavaScript">Javascript<br>
</form>

Answer 2

您需要将初始化代码包装在页面加载后触发的侦听器中（或者只需将您的 javascript 放在页面底部的 HTML 下）。

window.addEventListener('DOMContentLoaded', () => {
  ... init code
})

此外，您可以使用条件 ? 以防没有选中的值

  console.log(document.querySelector('input[name="radios"]:checked')?.value);

window.addEventListener('DOMContentLoaded', () => {
  console.log(document.querySelector('input[name="radios"]:checked')?.value);
})

 <form>
 <input type="radio"  id='HTML'name="radios" value="HTML">HTML<br>
<input type="radio" id="css" name="radios"  value="CSS">CSS<br>
<input type="radio" id="javascript" checked name="radios" value="JavaScript">Javascript<br>
</form>