jQuery将消息附加到每个标签

单击check（检查）按钮时，将向单选组checked（检查）单选按钮correct（正确）或Error（不正确）追加一条消息。我希望消息与所选单选按钮对齐。此时，这两条消息应用于两个选中的单选按钮，而不是相关的正确或不正确按钮

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

希望我不会太困惑：-

$(".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>

---

您希望在单击复选框时显示验证消息。 你想把它放在收音机旁边，在右边标签后面

我在所有HTML无线电输入中添加了一个数据属性。 要知道wich是正确的，而不是

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();
});

---

你的HTML是一个«硬»混乱。。。检查一下。我有奇怪的嘲弄试图缩进它。想想容器。像特百惠。你的结尾标签放错地方了。-抱歉，此评论没有解决问题。。但问题是格式。你是程序员吗。。缩进代码。这节省了调试。谢谢你。我将重新格式化HTML并重新应用它。HTML已检查并重新格式化：-什么消息？«我希望消息与所选单选按钮对齐»-@LouySpatriceBesette，该单选按钮有效。非常感谢你。