html - 如果选中复选框，则为粗体标签 - 无标签选择器

Question

我有以下复选框设置

 ul.list li label {
      font-weight: 300;
    }

  <ul class="list">
      <li>
        <label class="selectit">
          <input type="checkbox"/>
          "Blah" 
        </label>
      </li>
    </ul>

当复选框被选中时，我试图将标签变为粗体。

但是我的标签文本周围没有任何 html 标签，因此通常的解决方案:checked + span或:checked + label在这种情况下不起作用。

在这种情况下如何使标签加粗？只有CSS可以吗？

标签： htmlcss

Answer 1

你可以用 CSS 来实现，但网站功能真的不应该用 CSS 来实现，而应该用 JavaScript 来实现。

你可以试试这个 JavaScript。

window.onload = function() {
  document.querySelectorAll('ul.list li input').forEach(item => {
    item.addEventListener('click', event => {
      var label = item.parentNode;
      if (item.checked) {
        label.style.fontWeight = "bold";
      } else {
        label.style.fontWeight = "normal"
      }
    })
  })
}