Question

我的网站上有这种复选框至少4个复选框

<div id="product">
   <div class="checkbox">
      <label>
        <input type="checkbox">
        <img src="http://test.com/dev/image/cache/catalog/chains/chain_1-50x50.jpg" alt="Chain 1 +₱10.00" class="img-thumbnail"> 
        Chain 1 (+₱10.00)
      </label>
   </div>
</div>

如何添加css，当我选中复选框时，图像会添加一些边框，文字会更大

我有这段代码但不起作用

 #product :checked + label {
  font-weight: bold;
} 
 #product :checked + img{
  border:1px solid red
}

Answer 1

CSS规则：

#product :checked + label {
  font-weight: bold;
}

将匹配<label> :checked项的直接兄弟。在您的情况下，标签是复选框的父。要使文本变为粗体，可以将其包装在<span>中，然后使用~组合子选择任何匹配的兄弟：

HTML

<div id="product">
   <div class="checkbox">
      <label>
        <input type="checkbox">
        <img src="http://test.com/dev/image/cache/catalog/chains/chain_1-50x50.jpg" alt="Chain 1 +₱10.00" class="img-thumbnail"> 
        <span>Chain 1 (+₱10.00)</span>
      </label>
   </div>
</div>

CSS

#product :checked ~ span {
  font-weight: bold;
}

如果HTML与问题中的一样，则以下内容应该有效：

 #product :checked + img{
    border:1px solid red
 }

如果没有，您可能在复选框和图像之间有另一个元素。在这种情况下，您可以使用上述#product :checked ~ img。

Answer 2

您的代码适用于图像边框，但如果不修改HTML，则无法在纯CSS中完成文本粗体。如果您无法修改HTML，则需要使用以下JavaScript：

document.querySelector("#product input").addEventListener("click", function() {
  var img = document.querySelector("#product img");
  var label = document.querySelector("#product label");

  if (this.checked) {
    img.style.border = "1px solid red";
    label.style.fontWeight = "bold";
  } else {
    img.style.border = "none";
    label.style.fontWeight = "normal";
  }
});

<div id="product">
  <div class="checkbox">
    <label>
        <input type="checkbox">
        <img src="http://via.placeholder.com/50x50" alt="Chain 1 +₱10.00" class="img-thumbnail"> 
        Chain 1 (+₱10.00)
        </label>
  </div>
</div>

所选复选框上的CSS

2 个答案: