Javascript：在复选框标签旁边添加文本

Question

我有这个复选框：

<div id="div_id_diag-diagnosis_option" class="form-group">
<label for="id_diag-diagnosis_option_0" class="control-label col-md-3 requiredField">
Option<span class="asteriskField">*</span></label>
<div class="controls col-md-8"><label class="checkbox">
<input type="checkbox" name="diag-diagnosis_option" id="id_diag-diagnosis_option_1" value="b" >b</label>
<label class="checkbox">
<input type="checkbox" name="diag-diagnosis_option" id="id_diag-diagnosis_option_2" value="a" >a</label>
<label class="checkbox">
<input type="checkbox" name="diag-diagnosis_option" id="id_diag-diagnosis_option_3" value="c" >c</label>
</div></div>

我正在使用此javascript将html链接添加到每个选中的复选框。

$("input[name='diag-diagnosis_option']").change(function () {
                        if ($(this).prop('checked')) {
                            var option = $(this).val();
                            alert(option);
                            $(this).after("<a href='#'>here</a>");
                        }
                    });

文本打印在标签的左侧。 是否可以在标签之后（例如b的右侧）打印？

在此处查看演示。

先感谢您！

Answer 1

您需要使用.parent()遍历到父对象，并使用jQuery的append()函数：

$(this).parent().append("<a href='#'>here</a>");

检查小提琴：

https://jsfiddle.net/ucnepxqt/5/

Answer 2

尝试这个 -

$("input[name='diag-diagnosis_option']").change(function () {
    if ($(this).prop('checked')) {
        var option = $(this).val();
        alert(option);
        $(this).parent().append("<a href='#'>here</a>");
    }
});