Q:

Hide/show border on selected readio button

I'm trying to create a radio form, in which, on submit, you get a feedback of right and wrong answers. A right answer will get a green frame, and a wrong answer - a red frame.
I set the design properties in css as follow:
.wrong {width:250px ;border:1px solid #ff0000; border-style:hidden ; }
.right {width:250px; border:1px solid #00ff00; border-style:hidden ; }

This is the form:
<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>

Any ideas on I use JavaScript to show the frame on the selected answer?
Thanks!

A:

So basically you need a function which can pick the selected radio element and apply the necessary class if it is right:
Leaving your html as it is, you can update your js as follows:
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')
  }
} 

working example: http://plnkr.co/edit/nFOJbx7CRvIcdKIsyAuu?p=preview

