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？

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

Answer 2

我已经看到您对@willpakpoy 给出的答案的评论，您对他的答案感到满意，但希望将文本更改为粗体以立即进行更多输入。所以我修改了他的答案，使其适用于任意数量的输入元素。检查代码段。

 window.onload = function() {
  var checkBox = document.querySelectorAll("input");
  var label = document.querySelectorAll(".selectit");

var label = [...label]

label.forEach((el) => {
el.addEventListener("click", () => {
  if(el.firstElementChild.nodeName === "INPUT"){
  if (el.firstElementChild.checked === true) {
      el.style.fontWeight = "bold"
    } else {
      el.style.fontWeight = "normal";
    }
}
})

  });
}

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

Answer 3

使用 :checked 伪类：

#checkBox:checked + label {
  font-weight: bolder;
}

<input id="checkBox" type="checkbox" />
<label for="checkBox">Blah</label>

代码笔：https://codepen.io/manaskhandelwal1/pen/BaLqarq

如果选中复选框则加粗标签 - 无标签选择器

3 个答案: