表单验证中的彩色单选按钮-Javascript

Question

目前我有这个：

function validateRadio(x){
if(document.getElementById(x).checked){
return true;
}else{
return false;
}
}

以下是HTML：

<strong> Smoking Area? </strong>
<br>
Yes <input type="radio" name="hand" id="left" value="Left" onblur="validateRadio(id)"/>
No <input type="radio" name="hand" id="right" value="Right" onblur="validateRadio(id)"/>
<span class="validateError" id="handError" style="display: none;">Please specify whether you would like a table in the smoking area.</span>
<br><br>

但是，如果没有单击单选按钮，我希望它显示为红色，如果一次通过验证，则希望显示为绿色，这可能吗？

另外，我希望单击一次单选按钮后隐藏警告，目前它停留在页面上。 任何帮助，将不胜感激 ：）

Answer 1

尚不清楚您到底要绘制什么，但是如果您谈论的是单选按钮本身，我认为设计自己的按钮（具有打开和关闭状态的图像）并使用它们来替代是一个更好的主意。 这样，您将能够保持跨浏览器的一致性以及对站点的更好/自定义的外观。

但是，您在谈论文本部分（“吸烟区”，“是/否”），最简单的方法是为其容器指定一个ID，然后执行以下操作：

function validateRadio(x){
    if(document.getElementById(x).checked){
        document.getElementById('your_container').style.color = 'green';
        return true;
    }else{
        document.getElementById('your_container').style.color = 'red';
        return false;
    }
}