如何在复选框后添加文本

How to Add text after checkbox

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

我有以下html：

<td><label class="checkbox-inline"><input type="checkbox" class="chkRootCauseSummary" /> </label></td>

如何在不丢失复选框的情况下将文本插入标签？

我尝试了以下方法，但我丢失了复选框：

 $('.chkRootCauseSummary').click(function () {
    var num = $(this).closest('table').find('input[type=checkbox]:checked').length;
    $(this).closest('label').append().html(num);
});

有一种更干净的方法可以做到这一点。只需在创建checkbox时添加一个值属性（或任何名称的属性）

<input type="checkbox" class="chkRootCauseSummary" value="Some Value" />

并使用CSS选择器:after例如

[type=checkbox]:after {
    content: attr(value);
}

您要查找的是前置，因为它需要在.checkbox-inline内部和外部添加.chkRootCauseSummary

取代 

 $(this).closest('label').append().html(num);

跟

 $(this).closest('label').prepend(num);

试试这个

$('.chkRootCauseSummary').click(function() {
  var num = $(this).closest('table').find('input[type=checkbox]:checked').length;
  $(this).closest('label').after(num)
});

$('.chkRootCauseSummary').click(function () {
    var num = $(this).closest('table').find('input[type=checkbox]:checked').length;
    $(this).closest('label').after().html(num);
});
相关文章：