单击单选按钮时如何添加文本“正确答案”？

Question

这是我的代码：

          <!-- For Multiple Choose (Radio Button) -->
    <div class="col-sm-12 radiobutton">
        <div class="col-sm-5">
            <div class="form-group">
                <div class="radio radio-replace color-green">
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                            <label><b>A</b></label>
                        </div>
                <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <div class="radio radio-replace color-green">
                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                            <label><b>B</b></label>
                        </div>
                <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <div class="radio radio-replace color-green">
                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                            <label><b>C</b></label>
                        </div>
                <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <div class="radio radio-replace color-green">
                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                            <label><b>D</b></label>
                        </div>
                <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
            </div>
        </div>
    </div>
    <!-- End of Multiple Choose (Radio Button) -->

这是 Desired output，当我单击单选按钮时。

Answer 1

制作一个空白段落使用 javascript innerhtml 将空白段落的文本替换为您的文本，即 "correct answer " 或 "incorrect answer"

Answer 2

因为您是 SO 的新手，所以欢迎来到 SO。永远记得提供您已经尝试过的东西，例如代码示例。我准备这个是为了让您了解如何实现您想要的东西。如果他选择了正确答案或错误答案，这将提醒用户。

$(document).ready(function(){
  $('input[name=answer]').change(function(){
    if($('input[name=answer]:checked').val() === "CORRECT") {
      alert('You have selected the correct answer!');
    } else {
      alert('You have selected the wrong answer!');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Choose correct answer from below -</p>
<input type="radio" name="answer" value="WRONG" /> A
<input type="radio" name="answer" value="CORRECT" /> B
<input type="radio" name="answer" value="WRONG" /> C
<input type="radio" name="answer" value="WRONG" /> D

更新

取自您更新后的代码 -

$(document).ready(function(){
  $('input[name=optionsRadios]').change(function(){
     $('.alert').remove();
    if($('input[name=optionsRadios]:checked').val() === "option1") {
      $(this).parent().append('<span class="alert green">&#10004 Correct Answer</span>');
    } else {
      $(this).parent().append('<span class="alert red">&#10006 Wrong Answer</span>');
    }
  });
});

.alert.green {
 color: green;
}

.alert.red {
 color: red;
}

.fortiny {
  width: 60%;
  height: 40px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12 radiobutton">
                    <div class="col-sm-5">
                        <div class="form-group">
                            <div class="radio radio-replace color-green">
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
                                        <label><b>A</b></label>
                                    </div>
                            <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <div class="radio radio-replace color-green">
                                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                        <label><b>B</b></label>
                                    </div>
                            <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <div class="radio radio-replace color-green">
                                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                                        <label><b>C</b></label>
                                    </div>
                            <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <div class="radio radio-replace color-green">
                                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                                        <label><b>D</b></label>
                                    </div>
                            <textarea class="form-control fortiny" name="area2" cols="1" rows="1" style="height: 100px;" ></textarea>
                        </div>
                    </div>
                </div>

单击单选按钮时如何添加文本“正确答案”？

How to add the text “correct answer” when radio button is clicked?

html

javascript

css

button

radio