无论我选择什么单选按钮,控制台输出始终为"bcdab",即使我什么都不选择。
我做错了什么?为什么我的选择不起作用?
<form name="quiz">
<input type="radio" name="1" value="a"/>
<input type="radio" name="1" value="b"/>
<input type="radio" name="1" value="c"/>
<input type="radio" name="1" value="d"/> <br/>
...
<input type="radio" name="5" value="a"/>
<input type="radio" name="5" value="b"/>
<input type="radio" name="5" value="c"/>
<input type="radio" name="5" value="d"/> <br/>
<button type="button" onclick="gradeQuiz();">Submit Quiz</button>
</form>
<script>
function gradeQuiz(){
var xhr=new XMLHttpRequest();
var q=document.forms[0].elements;
...
xhr.send("&1="+q['1'].value+
"&2="+q['2'].value+
"&3="+q['3'].value+
"&4="+q['4'].value+
"&5="+q['5'].value);
...
console.log(xhr.ResponseText);
}
</script>
<?php
$choices=array($_POST['1'],$_POST['2'],$_POST['3'],$_POST['4'],$_POST['5']);
echo(implode($choices));
?>
看到问题:-
xhr.send("&1="+q['1'].value+
"&2="+q['2'].value+
"&3="+q['3'].value+
"&4="+q['4'].value+
"&5="+q['5'].value);
当您使用 q['1']
时 - 它会调用第二个值<input>
该值b
然后:-
q['2'].value= 'c';
q['3'].value= 'd';
q['4'].value= 'a';
q['5'].value= 'b';
所以最后你得到了bcdab
值
解决方案:-
function gradeQuiz(){
var xhr=new XMLHttpRequest();
for (i=0;i<document.getElementsByName('1').length;i++) { if(document.getElementsByName('1')[i].checked){ val1= document.getElementsByName('1')[i].value; } }
for (i=0;i<document.getElementsByName('2').length;i++) { if(document.getElementsByName('2')[i].checked){ val2= document.getElementsByName('2')[i].value; } }
for (i=0;i<document.getElementsByName('3').length;i++) { if(document.getElementsByName('3')[i].checked){ val3= document.getElementsByName('3')[i].value; } }
for (i=0;i<document.getElementsByName('4').length;i++) { if(document.getElementsByName('4')[i].checked){ val4= document.getElementsByName('4')[i].value; } }
for (i=0;i<document.getElementsByName('5').length;i++) { if(document.getElementsByName('5')[i].checked){ val5= document.getElementsByName('5')[i].value; } }
...
}
最后:-
xhr.send("&1="+val1+
"&2="+val2+
"&3="+val3+
"&4="+val4+
"&5="+val5);
一种更简单的方法:-
var q1 = document.querySelector('input[name = "1"]:checked');
var q2 = document.querySelector('input[name = "2"]:checked');
var q3 = document.querySelector('input[name = "3"]:checked');
var q4 = document.querySelector('input[name = "4"]:checked');
var q5 = document.querySelector('input[name = "5"]:checked');
最后:-
xhr.send(
"&1="+q1.value+
"&2="+q2.value+
"&3="+q3.value+
"&4="+q4.value+
"&5="+q5.value
);