Question

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

Answer 1

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

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

Answer 3

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

第一组无线电

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

单选按钮正在选择多个值

3 个答案: