用JS脚本突出显示我的复选框的边框

Question

这个脚本工作了20年，从那以后我再也没有接触过JS。我需要它给我的语言系学生，但我无法解决问题。我怀疑Verif函数是异相的，style.border属性是错误的？Validate不显示边界元素，解决方案有效，但也不显示颜色。是语法错误还是方法错误？谢谢你的帮助。

function verif(question) {
if ((question.cas1.checked) == true) {
question.cas1.style.border = '2px #FF0000 solid';
}
if ((question.cas2.checked) == true) {
question.cas2.style.border = '2px #00CC00 solid';
}
if ((question.cas3.checked) == true) {
question.cas3.style.border = '2px #FF0000 solid';
}
}
function getCheckAnswers() {
question.cas2.checked = 'true';
question.cas2.style.border = '2px #00CC00 solid';
}
function reloadPage() {
location.reload(true);
}

<FORM  name="question">
<br>
<br>
<b>1.</b>This is a non working JS I am just a language teacher<BR>
<INPUT type="checkbox" name="cas1">
French   <INPUT type="checkbox" name="cas2">
Dutch
<INPUT type="checkbox" name="cas3">
English <BR>   <BR>
<BR>
<input type="button" value="Validate" name="Test" onClick="verif(question)" class=input1>   
<input type="button" value="solutions" onclick="getCheckAnswers()" class=input1>
<input type="button" value="startagain" onclick="reloadPage()" class=input1>
</FORM>

Answer 1

使用outline而不是border。您的代码已在下面修复。我还删除了包含布尔值的变量与true的比较。

function verif(question) {
if (question.cas1.checked) {
question.cas1.style.outline = '2px #FF0000 solid';
}
if (question.cas2.checked) {
question.cas2.style.outline = '2px #00CC00 solid';
}
if (question.cas3.checked) {
question.cas3.style.outline = '2px #FF0000 solid';
}
}
function getCheckAnswers() {
question.cas2.checked = 'true';
question.cas2.style.outline = '2px #00CC00 solid';
}
function reloadPage() {
location.reload(true);
}

<FORM  name="question">
<br>
<br>
<b>1.</b>This is a non working JS I am just a language teacher<BR>
<INPUT type="checkbox" name="cas1">
French   <INPUT type="checkbox" name="cas2">
Dutch
<INPUT type="checkbox" name="cas3">
English <BR>   <BR>
<BR>
<input type="button" value="Validate" name="Test" onClick="verif(question)" class=input1>   
<input type="button" value="solutions" onclick="getCheckAnswers()" class=input1>
<input type="button" value="startagain" onclick="reloadPage()" class=input1>
</FORM>