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

:-)あなたはCheckクリックで表示される "検証メッセージ" をしたい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

あまりにも混乱しているわけではありません。
そして、あなたはラジオを脇に置いておきたいです（右はlabelの後です）。

あなたのすべてのHTMLラジオinputにdata属性を追加しました。ここではその後

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

それを表示させるためのコードです：
は...

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

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

WICHが正しくないことを知っているためにフォーマットするメッセージのためのいくつかのCSSを手に入れた

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