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

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

保持你的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获取所选的收音机，然后您可以将一个类添加到节点的父节点上以打开边框：

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

创建css类：

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

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

在所选的readio按钮上隐藏/显示边框

3 个答案: