如何使用 JavaScript 在特定单选按钮上应用条件

Posted 2023-03-27

【中文标题】如何使用 JavaScript 在特定单选按钮上应用条件

【英文标题】：How to apply Condition on specific Radio Button using JavaScript

【发布时间】：2021-02-22 03:30:58

【问题描述】：

我想要的是当我点击特定的 red id 单选按钮然后它显示我 Alert 正如你在代码中看到的......在我的情况下它不是正在发生.. 有什么问题，我该如何解决？

<form>
  What color do you prefer?<br>
  <input type="radio" name="colors" id="red">Red<br>
  <input type="radio" name="colors" id="blue">Blue
</form>
<script>
  if (document.getElementById("red").checked == true) 
    alert('working');
  
</script>

【参考方案1】：

你需要一个事件监听器

document.getElementById("red").addEventListener("change", myAlert); 

function myAlert() 
    alert('working');

<form>
    What color do you prefer?<br>
    <input type="radio" name="colors" id="red">Red<br>
    <input type="radio" name="colors" id="blue">Blue
</form>

【参考方案2】：

您需要事件侦听器 - 不建议使用内联事件处理程序 您需要确定要测试的内容

这里有两种跑法

它们是收音机，所以我们不需要测试它们是否被检查

window.addEventListener("load",function()  // when the page loads

  // testing clicking the RED only
  document.getElementById("red").addEventListener("click",function() 
    console.log("The specific Red event listener was invoked");
  );    

  // delegation
  document.querySelector("form").addEventListener("click",function(e) 
    const tgt = e.target;
    if (tgt.id==="red") console.log("Clicking in the form, we clicked the thing with ID red")
  )
);

<form>
  What color do you prefer?<br>
  <label><input type="radio" name="colors" id="red">Red</label><br>
  <label><input type="radio" name="colors" id="blue">Blue</label>
</form>

【参考方案3】：

试试这样：

<form>
  What color do you prefer?<br>
  <input type="radio" name="colors" id="red"/>Red<br>
  <input type="radio" name="colors" id="blue"/>Blue
</form>
<script>
document.getElementById("red").onchange = function() 
   alert('working');

</script>

当单击单选按钮时，需要一个事件处理程序来运行该特定代码。

【讨论】：

是的。我已经简化了答案。谢谢。

不推荐使用内联事件处理程序

现在事件处理程序不是内联的。