jQuery 将消息附加到每个标签

Question

当单击复选按钮时，一条消息会附加到已选中的单选组单选按钮（正确或不正确）。我希望消息与选定的单选按钮对齐。目前，两条消息都应用于两个选中的单选按钮，而不是关联的正确或不正确。

如何更新此脚本，以便正确检查按钮应用正确消息，如果不正确则应用相关消息？

希望我不会太困惑:-)

$(".quiz__check").on("click", function() {
  $("input:radio:checked").removeAttr("disabled");   
  if($("input:radio:checked").length > 0){
    $("input:radio:checked").addClass("mPos");;
    $("input:radio:checked").closest(".radio").find(".mPos + label").append( $('.quiz__control-feedback') );
  }
});

HTML

<div id="accessContainer">
  <form class="quiz" id="a01" name="a01">
    <div class="quiz__preamble"></div>
    <ol class="assessment-list">
      <li>
        <span><strong>Question 1:</strong> What question is this?</span>
        <div></div>
        <div aria-label="When should you make adjustments to the program or environment?" class="quiz__control accessibleRadio" id="a01-01-q09" role="radiogroup">
          <p><input data-set="a01-01-q09" id="a01-q09-e01" name="a01-01-q09" type="radio" value="a01-01-q09"> <label for="a01-q09-e01">This is question 1</label></p>
          <p><input data-set="a01-01-q09" id="a01-q09-e02" name="a01-01-q09" type="radio" value="a01-01-q09"> <label for="a01-q09-e02">This is question 20</label></p>
        </div>
      </li>

      <li>
        <span><strong>Question 2:</strong> Is this question 2?</span>
        <div></div>
        <div aria-label="When should you teach children about diversity and difference?" class="quiz__control accessibleRadio" id="a01-01-q11" role="radiogroup">
          <p><input data-set="a01-01-q11" id="a01-q11-e01" name="a01-01-q11" type="radio" value="a01-01-q11"> <label for="a01-q11-e01">Yes</label></p>
          <p><input data-set="a01-01-q11" id="a01-q11-e02" name="a01-01-q11" type="radio" value="a01-01-q11"> <label for="a01-q11-e02">No</label></p>
        </div>
      </li>
    </ol>
    <div class="quiz__buttons screen-only">
      <button class="quiz__reset btn btn-default" title="Clear my answers" type="reset">Reset</button> <button class="quiz__check btn btn-primary" id="check_answers" title="Check my answers" type="button">Check</button>
    </div>
  </form>
</div>

Answer 1

您希望在点击Check 时显示“验证消息”。
你想把它放在收音机旁边，在右边（所以在label之后）。

我为您的所有 HTML 广播 input 添加了一个 data 属性。
要知道这是正确的，而不是......

data-validation="1" // for good answer

data-validation="0" // for wrong answer

一些用于消息格式的 CSS：

.validation-hint{
  margin-left:1em;
  font-style:bold;
}
.correct{
  color:#44c744;
}
.incorrect{
  color:#F74444;
}

那么这里是让它出现的代码：

$(".quiz__check").on("click", function() {
  var checked = $("input[type='radio']:checked");
  var correct = "<span class='validation-hint correct'>Correct!</span>";
  var incorrect = "<span class='validation-hint incorrect'>Incorrect!</span>";

  if(checked.length > 0){

    // Remove all validation hints, if any.
    $(".validation-hint").remove();

    // Show a validation message based on data-validation.
    checked.each(function(){
      if( $(this).data("validation")=="1" ){
        $(this).next("label").after(correct);
      }else{
        $(this).next("label").after(incorrect);
      }
    })
  }
});

// Reset button also remove the validation messages.
$("[type='reset']").on("click",function(){
  // Remove all validation hints
    $(".validation-hint").remove();
});

CodePen