使用 javascript 使用选择器更改类答案

【问题标题】：Change a class with a selector using javascript使用 javascript 使用选择器更改类
【发布时间】：2019-03-07 05:43:12
【问题描述】：

我是网络编程的新手，我一直在尝试做一个真/假测试，当提交答案时，答案会根据是否正确改变颜色。

起初，我为每个输入使用标签：

<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] + label”或“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;
}

所以，刚检查时，它是蓝色的，但是当提交答案时，根据输入的值，它会改变 class:checked 的颜色。

有没有办法在 javascript 中使用选择器修改类的样式？此外，如果用户决定更改他对某个问题的回答，则选中的选项必须恢复为颜色中性。

感谢您的帮助。

【问题讨论】：

您可以根据事件向您的元素添加/删除/切换一个类，并让相关的 css 管理您所需的颜色代码。使用w3schools.com/howto/howto_js_toggle_class.asp 或w3schools.com/howto/howto_js_add_class.asp

标签： javascript html css

【解决方案1】：

你可以使用这个函数来改变你之前解释过的元素的类别。但是如果不使用第三方插件或自定义元素，则无法更改复选框的颜色。请检查此link

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");
}
}

【讨论】：