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的右边？

查看演示here。

提前谢谢！

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

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

2 个答案: