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

Javascript: Add text next to checkbox label

本文关键字：添加 文本 复选框 标签      更新时间：2023-09-26

我有这样一个复选框:

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

查看这里的演示。

提前感谢!

你需要用.parent()遍历到父元素，并使用jQuery的append()函数:

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

检查小提琴:https://jsfiddle.net/ucnepxqt/5/

试试这个- 

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