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

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

因为你是第一个欢迎SO的新人。永远记得提供你已尝试过的代码样本。我已准备好了解如何实现您想要的东西。如果他选择了正确的答案或错误的答案，这将提醒用户。

＆＃13;

＆＃13;

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

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

<强>更新

从您更新的代码中获取 -

＆＃13;

＆＃13;

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

＆＃13;

.alert.green {
 color: green;
}

.alert.red {
 color: red;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

制作一个空白段落 使用javascript innerhtml将空白段落的文本替换为您的文本，即＆＃34;正确答案＆＃34;或＆＃34;错误答案＆＃34;