单选按钮正在选择多个值答案

【问题标题】：radio button is selecting multiple values单选按钮正在选择多个值
【发布时间】：2016-11-17 04:59:07
【问题描述】：

<!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>

我通过 JSON 从文本文件中获取所有问题和选项，并且我成功了。但我的主要问题是我的所有单选按钮都被选中，如果一个按钮被选中，那么另一个按钮未被选中。我的代码有什么问题？我做的事？为什么会导致这个问题？ ?** 对于我使用 W3.CSS 的样式 **？

【问题讨论】：

标签： javascript html css json

【解决方案1】：

对于特定问题的选项，您的单选输入字段的名称应该相同。如下：

第一组收音机

<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>

第二组电台

<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>

【讨论】：

【解决方案2】：

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

<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】：

您的 HTML 输入单选应具有相同的 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>

【讨论】：

打败我，很好