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

Question

我有三个无线电输入，我想让无线电输入 return inputs u 的值，并在用户 select 有一个选项时执行功能。

代码如下：

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的内置函数，当用户select一个选项或其他解决问题的方法时，它会执行一个函数？

感谢任何回复！

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

Answer 1

您需要将初始化代码包装在页面加载后触发的侦听器中（或者将您的 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>

Answer 2

您正在寻找点击监听器。只需将一个侦听器附加到表单元素（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>

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

are there some built-in function like onclick for radio input?

html

javascript

radio-button