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

Question

我创建了一个单选按钮，显示“否”和“是”。默认情况下，未选择任何内容。

所以我要在这里做的是，如果有人选择“否”，则什么也不会发生，但是如果有人选择“是”，它应该在下面打一个文字，说“你好，世界”。

有人可以帮忙吗？

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

Answer 1

只需将click的事件侦听器添加到相关元素：

JavaScript解决方案：

document.querySelector('input[value="charge"]').addEventListener("click", function()
{
    document.getElementById("someId").innerHTML += "HELLO WORLD!<br>";
});

<input type="radio" name="myRadio" value="no-charge">
No
<input type="radio" name="myRadio" value="charge">
Yes
<p id="someId"></p>

JQuery解决方案：

$('input[value="charge"]').click(function()
{
    $("#someId").html($("#someId").html() + "HELLO WORLD!<br>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="myRadio" value="no-charge">
No
<input type="radio" name="myRadio" value="charge">
Yes
<p id="someId"></p>

Answer 2

您需要为单击单选按钮设置事件侦听器。单击任一按钮时，您需要检查选中按钮的值。设置为“是”时，将消息设置为“ 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>

Answer 3

1。

  let radio_1 = document.getElementById("radio_1")
  radio_1.addEventListener("click",function(){
    alert("hello world")
  })

  <input type="radio" value="no-charge" id="radio_1">
  <input type="radio" value="charge" id="radio_2">

2。方法

    function myAlert(){
      alert("hello world")
    }

  <input type="radio" value="no-charge" onclick=myAlert()>
  <input type="radio" value="charge" id="radio_2">

3。路

    $("#radio_1").click(function(){
      alert("hello world")
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="no-charge" id=radio_1>
  <input type="radio" value="charge" id="radio_2">

Answer 4

添加事件侦听器，如下所示：

document.getElementById("yes").addEventListener("click", () => console.log("Hello world!"));

<form>
  <input type="radio" value="no-charge"> No
  <input type="radio" value="charge" id="yes"> Yes
</form>

Answer 5

function onChange(event) {
  var x = document.getElementById("hello-world");
  console.log(event.target.value);
  if(event.target.value === "yes"){
    x.style.display = "block";
  } else { 
    x.style.display = "none";
  }
}

<input type="radio" name="group" value="no" onchange="onChange(event);">
No
<input type="radio" name="group" value="yes" onchange="onChange(event);">
Yes
<div id="hello-world" style="display:none">Hello World</div>