Javascript 隐藏/显示选定readio按钮上的边框

我正在尝试创建一个广播表单，在这个表单中，在提交时，你会得到正确答案和错误答案的反馈。正确的答案会得到一个绿色的框架，而错误的答案会得到一个红色的框架。 我在css中设置的设计属性如下：

.wrong {width:250px ;border:1px solid #ff0000; border-style:hidden ; }
.right {width:250px; border:1px solid #00ff00; border-style:hidden ; }

表格如下：

<form id="office">
    <label id="ques1"> question 1</label>
        <div class="q1 wrong q1a1"><input type="radio" name="question1" value="q1a1" /> Answer1 <br/></div>
        <div class="q1 wrong q1a2"><input type="radio" name="question1" value="q1a2" /> Answer2 <br/></div>
        <div class="q1 wrong q1a3"><input type="radio" name="question1" value="q1a3" /> Answer3 <br/></div>
        <div class="q1 right q1a4"><input type="radio" name="question1" value="q1a4" /> Answer4 <br/></div>

            <br/><br/>

     <input type="submit" id="submit" name="submitAnswers" value="Submit Your Answers" onclick="checkFunction()" />
</form>

---

您可以这样做：

function checkFunction() {
  var elements = document.getElementsByClassName('q1');
  elements.forEach(function(element) {
    element.style['border-style'] = 'solid';
  });
}

---

因此，基本上您需要一个函数，该函数可以选择所选的无线电元素，并在正确的情况下应用必要的类：

保持html不变，您可以按如下方式更新js：

function checkFunction() {
  var checked = document.querySelectorAll('input[type="radio"]:checked');
  var div = document.querySelectorAll('div.'+checked[0].value);
  console.dir(checked[0]);
  if (checked[0].value === 'q1a3') { // add business logic here to determine what is right answer
      div[0].classList.add('right')
  } else {
    div[0].classList.add('wrong')
  }
} 

---

工作示例：

您将使用document.querySelector获得所选的收音机，然后您可以向节点的父节点添加一个类，该类将打开边框：

document.querySelector('input[name="question1"]:checked').parentNode.className += " frame-visible"; 

创建css类：

.frame-visible {
   border-style: solid;
}

---

您是否使用ajax提交表单？不，至少我认为我没有t@Kashyap_Mukkamala非常感谢你的回答！我仍然没有得到一些东西，代码仍然不适合我。当我在自己的代码中输入脚本时，它似乎无法调用checkFunction。我收到一个错误：“checkFunction未定义”。你知道为什么吗？非常感谢你！

.frame-visible {
   border-style: solid;
}