为每个单选按钮分配功能

Question

我知道这可能很愚蠢，但我是新手。 事情是这样的： 我有两个单选按钮，我想根据您的选择接收消息，但我收到的消息相同，但我不知道我做错了什么：

<form method="post" action="demoform.asp">
      <fieldset data-role="controlgroup">
      <legend>choose number</legend>
        <label for="one">number one</label>
        <input type="radio" id="number" name="1" value="1">
        <label for="second">number two</label>
        <input type="radio"  id="number" name="2" value="2">
      </fieldset>
       <p id="demo"></p>
        <input type="button" id="demo" onclick="myfunction()" >Click me</button>
    </form>

和脚本：

function myfunction() {
    var place = document.getElementById("number").value;
    var text;


    if (place === "1") {
        text = "Spot Good job!";


    } else if (place === "2" ) {
        text = " close enough.";
            } 
document.getElementById("demo").innerHTML = text;
}

Answer 1

如果您希望您的单选按钮像真正的单选按钮一样工作，那么它们应该具有相同的name 属性。您也不能有多个元素具有相同的id 属性。最后，您的 HTML 中的按钮存在语法错误。

function myfunction() {
    var place = document.querySelector('input[name="number"]:checked');
    var text;

    if (!place) {
        text = "Select a radio option";
    } else if (place.value === "1") {
        text = "Spot Good job!";
    } else if (place.value === "2" ) {
        text = " close enough.";
    } 
  
    document.getElementById("demo").innerHTML = text;
}

<form method="post" action="demoform.asp">
      <fieldset data-role="controlgroup">
        <legend>choose number</legend>
        <label for="number_1">number one</label>
        <input type="radio" id="number_1" name="number" value="1">
        <label for="number_2">number two</label>
        <input type="radio"  id="number_2" name="number" value="2">
      </fieldset>
      
      <p id="demo"></p>

      <button type="button" id="demo" onclick="myfunction()" >Click me</button>
</form>

Answer 2

您的单选按钮必须具有相同的名称，但具有唯一的 ID。 你可以使用

<label for="one">number one</label>
<input type="radio" id="n1" name="number" value="1">
<label for="second">number two</label>
<input type="radio"  id="n2" name="number" value="2">
<input type="button" id="demo" onclick="myfunction()" >Click me</button>

使用javascript：

var text;
if(document.getElementById("n1").checked)
    text = "Spot Good job!";
if(document.getElementById("n2").checked)
    text = " close enough.";
document.getElementById("demo").innerHTML = text;

Answer 3

标签标签或元素的 for 属性值应与输入元素或标签的 id 属性值匹配...另请注意，最佳做法是将输入元素嵌套在标签元素中并使用Value 属性，需要将 value 属性设置为标识选项。