使用javascript使用選擇器更改類

Question

我是Web編程的新手，我一直在嘗試做一個對/錯測試，提交答案時，答案會根據是否正確而改變顏色。

首先，我為每個輸入使用標簽：

<h3>1. Father Christmas and Santa Claus are the same man</h3>
     <input type="radio" id="1bon" name="q1" value="Non" >  
          <label for="1bon" > True </label> <!-- label is for css -->
     <input type="radio" id="1non" name="q1" value="Bon">
          <label for="1non"  > False </label><br/>

在CSS中，我使用“ input [value = Bon] +標簽”或“ input [value = Non] + label”和“背景色：藍色”，在JS中，我使用label [i] .style .background更改顏色。 它確實會更改顏色，但只會更改單選按鈕的顏色，並且在未選中時會更改顏色，這正是我要嘗試執行的操作。 這是因為我不知道如何選擇精確輸入[x = y]：selector的標簽。

所以我重寫了整個過程，沒有任何標簽

<h3>1. Father Christmas and Santa Claus are the same man </h3>       
     <input type="radio" class="input" id="1bon" name="q1" value="Non">  True 
     <input type="radio" class="input" id="1non" name="q1" value="Bon"> False 

使用新的CSS：

.input {
background-color: #fff;
display:inline-block;
width:5%;
padding:10px;
border:1px solid #ddd;
margin-bottom:10px;
cursor:pointer; /* new selectoon type */
}
.input:checked{
background-color: #4876ff;
}

因此，當剛剛選中時，它是藍色的，但是當提交答案時，根據輸入的值，它會更改類的顏色：選中。

有沒有辦法用javascript中的選擇器修改類的樣式？ 同樣，如果用戶決定更改其問題答案，則被檢查者必須返回到中性色。

謝謝您的幫助。

Answer 1

您可以使用此功能來更改元素的類，如前所述。 但是，如果不使用第三方插件或自定義元素，則無法更改復選框的顏色。 請檢查此鏈接

function Test2($this){
var radios = document.getElementsByName('q1');
for(i=0; i< radios.length; i++){
    var element = radios[i];
    element.classList.remove("correctAnswer");
    element.classList.remove("wrongAnswer");
}
if($this.value === "Non"){//Assume "Non" is correct answer
$this.classList.add("correctAnswer");
}else{
$this.classList.add("wrongAnswer");
}
}