Hide/show 所选单选按钮上的边框

Question

我正在尝试创建一个无线电表单，在其中提交时，您会得到正确和错误答案的反馈。一个正确的答案会得到一个绿色的框架，而一个错误的答案 - 一个红色的框架。我将 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>

关于我使用 JavaScript 在所选答案上显示框架有什么想法吗？

Thanks!

Answer 1

你可以这样做：

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

http://codepen.io/anon/pen/jbjPBO

Answer 2

所以基本上你需要一个函数来选择所选的单选元素并应用必要的 class 如果它是正确的：

保持 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')
  }
}

工作示例：http://plnkr.co/edit/nFOJbx7CRvIcdKIsyAuu?p=preview

Answer 3

您将使用 document.querySelector 获得选定的无线电，然后您可以将 class 添加到打开边框的节点的父节点：

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

创建 css class:

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

http://jsfiddle.net/mcgraphix/229fxfLv/

Hide/show 所选单选按钮上的边框

Hide/show border on selected readio button

html

javascript

css

border

radio-button