单选按钮正在选择多个值

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/Quiz.css"> 
<script>
    var xmlh,url;

    xmlh = new XMLHttpRequest();
    url="AnswerFile.txt";

    xmlh.onreadystatechange=function(){
        if(xmlh.readyState == 4 && xmlh.status ==200){
        var myArr =JSON.parse(xmlh.responseText);
        myFunctuion(myArr);
      }
    };
    xmlh.open("GET",url,true);
    xmlh.send();
    function myFunctuion(arr){
        var dom=document.getElementById("demo");
        var cha=document.getElementById("radio1");
        var chb=document.getElementById("radio2");
        var chc=document.getElementById("radio3");
        dom.innerHTML = "<h3>" +arr[0].question+ "</h3>";
        cha.innerHTML = arr[0].ChA  ;
        chb.innerHTML = arr[0].ChB ;
        chc.innerHTML = arr[0].ChC ;

    }
</script>
<head>
<html>
<body>
<div class="w3-content" >
<form class="w3-container w3-card-4 w3-label">
<label id="demo"></label>
<input class="w3-radio" type="radio" name="ChA" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="ChB" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="ChC" value="c"> <label id="radio3"></label></input></br>
<br>
<br>
<input  class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey w3-center w3-section w3-border w3-round-xlarge " style="font-weight:900;" type="submit" value="Submit Answers">
</form>
</div>
</body>
</html>

i get my all question and option from text file by JSON and i succeeded it . But my main problem is all my radio button is checked where i want to if one button is checked then other button is unchecked . what my problem in code ? what i do? and why cause this problem ? ?** for style i use W3.CSS **?

我从JSON的文本文件中得到了我的所有问题和选项,我成功了。但我的主要问题是我的所有单选按钮都被选中了我想要的地方如果选中了一个按钮,那么其他按钮就会被取消选中。我的代码中有什么问题?我做的事?为什么会导致这个问题? ?**风格我使用W3.CSS **?

3 个解决方案

#1

Your HTML input radio should have the same name attribute, like this:

您的HTML输入广播应具有相同的名称属性,如下所示:

<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>

#2

Your radio buttons should all use the same name :)

你的单选按钮应该都使用相同的名称:)

<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>

#3

Name of your radio input fields should be same for specific question's options. Like below:

对于特定问题的选项,您的无线电输入字段的名称应该相同。如下所示:

First group of radios

第一组无线电

<input type="radio" name="rad" value="radopt1" id="radopt1"><label for="radopt1">Radio Option1</label></input>
<input type="radio" name="rad" value="radopt2" id="radopt2"><label for="radopt2">Radio Option2</label> </input>
<input type="radio" name="rad" value="radopt3" id="radopt3"><label for="radopt3">Radio Option3</label></input>

Second group of radios

第二组无线电

<input type="radio" name="rad1" value="rad1opt1" id="rad1opt1"><label for="rad1opt1">Radio1 Option1</label></input>
<input type="radio" name="rad1" value="rad1opt2" id="rad1opt2"><label for="rad1opt2">Radio1 Option2</label> </input>
<input type="radio" name="rad1" value="rad1opt3" id="rad1opt3"><label for="rad1opt3">Radio1 Option3</label></input>

#1