javascript - 在单选按钮选择上显示文本

Question

我创建了一个单选按钮，上面写着“否”和"is"。默认情况下，未选择任何内容。

所以我在这里要做的是，如果有人选择“否”，什么也不会发生，但如果有人选择"is"，它应该在下面打印一条文本，说“ Hello World ”。

有人可以帮忙吗？

<input type="radio" value="no-charge">
No
<input type="radio" value="charge">
Yes

Answer 1

您需要为单选按钮上的点击设置事件监听器。单击任一按钮时，您需要检查选中按钮的值。当它是"is"时，将您的消息设置为“hello world”，当它是“否”时为空白:

var radioY = document.getElementById("radioY");
var msg = document.getElementById("msg");
var radioQuery = document.getElementsByName("query");

function start() {
  radioQuery[0].addEventListener("click", checkClicked);
  radioQuery[1].addEventListener("click", checkClicked);
}
//
function checkClicked() {
  for (var x = 0; x < radioQuery.length; x++) {
    if (radioQuery[x].checked && radioQuery[x].value == "yes") {
      msg.innerHTML = "Hello World";
      return;
    } else {
      msg.innerHTML = "";
    }
  }
}
//
window.load = start();

<input name="query" value="no" type="radio"> No
<input name="query" value="yes" id="radioY" type="radio"> Yes
<div id="msg"></div>

这是您可能更喜欢的 jQuery 解决方案:

$(document).ready(function() {
  $("#radioY").click(function() {
    $("#msg").text("Hello World!");
  });
  $("#radioN").click(function() {
    $("#msg").text("");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' id='radioN' name='query' value='no' /> No
<input type='radio' id='radioY' name='query' value='yes' /> Yes
<div id="msg"></div>