表單驗證中的彩色單選按鈕-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;
    }
}