的Javascript：错误答案单选按钮

Question

function radioResult(){ 
 
\t var r = document.getElementsByName('0'); 
 
\t for(var i = 0; i < r.length; i++){ 
 
\t \t if(r[i].checked){ 
 
\t \t \t rValue = r[i].value; 
 
\t \t \t if(rValue!='1') { 
 
\t \t \t \t r.style.backgroundColor='blue'; 
 
\t \t \t } else { 
 
\t \t \t \t alert('correct'); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t qNo++; 
 
\t aCount2++; 
 
}

<input type='radio' name='0' value='1'>a<br> 
 
<input type='radio' name='0' value='2'>b<br> 
 
<input type='radio' name='0' value='3'>c<br> 
 
<input type='radio' name='0' value='4'>d<br> 
 
<hr> 
 
<button id="Mcqsbtn" onclick="radioResult()">Result</button>

的更改背景颜色我想radion按钮改变为蓝色背景，如果答案是假的。怎么做。 http://jsfiddle.net/mhabib555/k3h9c046/

更新

谢谢你们。我解决它通过你的帮助

Answer 1

首先，你会想针对实际元素即..

r[i].style.backgroundColor='blue'; 

这将属性应用到你的元素，但单选按钮没有被设计成具有背景色。我建议你用div填充每个按钮，并改为使用div。

function radioResult(){ 
 
\t var r = document.getElementsByName('0'); 
 
\t for(var i = 0; i < r.length; i++){ 
 
\t \t if(r[i].checked){ 
 
\t \t \t rValue = r[i].value; 
 
\t \t \t if(rValue!='1') { 
 
\t \t \t \t r[i].parentElement.style.backgroundColor='blue'; 
 
\t \t \t } else { 
 
\t \t \t \t alert('correct'); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t //qNo++; 
 
\t //aCount2++; 
 
}

.wrap{ 
 
    padding:5px; 
 
    }

<div class="wrap"> 
 
<input type='radio' name='0' value='1'>a<br> 
 
</div> <div class="wrap"> 
 
<input type='radio' name='0' value='2'>b<br> 
 
    </div> <div class="wrap"> 
 
<input type='radio' name='0' value='3'>c<br> 
 
    </div> <div class="wrap"> 
 
<input type='radio' name='0' value='4'>d<br> 
 
</div> 
 
<hr> 
 
<button id="Mcqsbtn" onclick="radioResult()">Result</button>

Answer 2

你可以参考

的Html

<div><input type='radio' name='0' value='1'>a</div> 
<div><input type='radio' name='0' value='2'>b</div> 
<div><input type='radio' name='0' value='3'>c</div> 
<div><input type='radio' name='0' value='4'>d</div>  
<hr> 
<button id="Mcqsbtn" onclick="radioResult()">Result</button> 

的Javascript

function radioResult(){ 
    var r = document.getElementsByName('0'); 
    for(var i = 0; i < r.length; i++){   
     if(r[i].checked){ 
      rValue = r[i].value; 
      if(rValue!='1') { 
       r[i].parentNode.style.backgroundColor='blue'; 
      } else { 
       alert('correct'); 
      } 
     } 
    } 

} 

请参阅fiddle

Explainati on

您必须设置特定单选按钮的background-color。因此，您应该使用r[i].style.backgroundColor='blue'而不是r.style.backgroundColor='blue'。

Answer 3

目标作为元素：

r[i].parentElement.style.backgroundColor='YourColor';