Javascript: 更改错误答案单选按钮的背景颜色

Question

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.style.backgroundColor='blue';
   } else {
    alert('correct');
   }
  }
 } 
 qNo++;
 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>

如果答案为假，我希望单选按钮的背景变为蓝色。怎么做。 http://jsfiddle.net/mhabib555/k3h9c046/

更新

谢谢你们。我在你的帮助下解决了

Answer 1

可以参考

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

说明

您必须设置特定单选按钮的 background-color。所以你应该使用 r[i].style.backgroundColor='blue'.

而不是 r.style.backgroundColor='blue'

Answer 2

首先你要定位实际元素，即..

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

这会将属性应用于您的元素，但单选按钮未设计为具有背景色。我建议您将每个按钮包装在 div 中并添加一些填充，然后将样式设置为 div。

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].parentElement.style.backgroundColor='blue';
   } else {
    alert('correct');
   }
  }
 } 
 //qNo++;
 //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 3

将元素定位为：

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

Javascript: 更改错误答案单选按钮的背景颜色

Javascript: Change background color of false answer radio button

html

javascript

radio-button