时间戳

首页 > 解决方案 > 选中复选框时如何将标签更改为更粗体？

html - 选中复选框时如何将标签更改为更粗体？

问题描述

我有一个 div 包含一个复选框和一个标签，如下所示：

<div class="form-check m-1">
    <input class="form-check-input mr-1 input-height-width" type="checkbox" value="" id="Wokin" />
    <label class="form-check-label" for="Wokin">
        Wokin
    </label>
    <span class="badge badge-pill badge-warning product-quantity">18</span>
</div>

仅当我选中复选框时，如何使该 div 的标签更粗？

$('.form-check input').change(() => {
    if (this.checked) {
        if ($('.form-check label').attr('for') == (this.attr('id'))) {
            $('.form-check label').addClass('bold');
        }
    }
})

当我有一个名为粗体的类时，我尝试在 jQuery 中执行此操作font-weight，但它不起作用。

.bold {
 font-weight:bold;
 }

标签： htmljquerycss

解决方案

您可以尝试一些 CSS 代码来检查复选框是否被选中，然后使用 + 字符将粗体代码应用于相邻的兄弟姐妹。

代码建议：

.form-check-input:checked + label {
  font-weight: bold;
}

推荐阅读