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

Posted 2023-03-05

【中文标题】是否有一些内置功能，例如用于无线电输入的 onclick？

【英文标题】：are there some built-in function like onclick for radio input?

【发布时间】：2022-01-21 03:01:25

【问题描述】：

我有三个无线电输入，我想让无线电输入返回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来检查，但是它会在页面加载时执行该函数，这对我不起作用。，

【问题讨论】：

只需将你的 JS 代码移动到单选按钮之后

【参考方案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>

【讨论】：

这很有帮助，但唯一的问题是，如果我只是单击文本 (Javascript/Css/HTML)，该函数也会执行并返回 undefined。有没有办法避免这种情况发生？

@Sahil 回答已更新。

【参考方案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>

【讨论】：

感谢您的回答，但我认为这会自动将值赋予Javascript。有没有办法解决这个问题？