通过 Checkbox:Checked 更改特定元素的样式

Question

我使用复选框作为修改其他元素样式的方式。复选框是否有可能影响网站的其他类/元素。

我下面有一个示例 html 代码，是否可以更改第一个 div 的样式，而不是更改标签元素。

ul li {
  display: inline-block;
}

ul li input[type="checkbox"]:checked+label {
  border: 2px solid gray;
  background-color: gray;
  color: #fff;
  transition: all .2s;
}

ul li {
  padding: 20px;
  margin: 20px;
}

ul li input[type="checkbox"] {
  display: absolute;
}

ul li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

ul li label {
  padding: 20px;
  cursor: pointer;
}

<div class="modify-box">
  BOX TO CHANGED
</div>
<ul>
  <li>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1"> Bike</label><br>
  </li>
  <li>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> Car</label><br>
  </li>
  <li>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
    <label for="vehicle3"> Boat</label><br>
  </li>
</ul>

Answer 1

有一种方法可以实现这一点，但它是使用与您设置

<label>

元素样式完全相同的“技巧”，特别是通过将

<input>

元素移动到您想要设置样式的元素之前。

考虑到这一点，如果

<input>

元素是

<div>

的前同级元素，则选中和取消选中，

<input>

可以对

<div>

以及原始

<label>

元素产生影响，如下所示好吧。

举个粗略的例子：

input[type="checkbox"][name^="vehicle"] {
  display: absolute;
  position: absolute;
  opacity: 0;
}

/* styles the <div> based on the checked/unchecked state
   of the <input> (this example assumes that the same
   highlight colour should be used regardless of which
   <input> is checked: */
input[type="checkbox"][name^="vehicle"]:checked ~ div {
  background-color: #ccc;
}

/* this is where it becomes obvious that JavaScript (or,
   ideally, a CSS selector that can refer to an attribute-
   variable) makes more sense; though with a CSS
   pre-processor this can be written effectively enough.
   Here when the #vehicle1 element is checked the <label>
   descendents with a "for" attribute equal to "vehicle1" of
   later-sibling <ul> elements are selected and styled: */
#vehicle1:checked~ul label[for=vehicle1] {
  background-color: gray;
}

/* as above, for the "vehicle2" id and for attributes: */
#vehicle2:checked~ul label[for=vehicle2] {
  background-color: gray;
}

#vehicle3:checked~ul label[for=vehicle3] {
  background-color: gray;
}

ul li {
  display: inline-block;
  padding: 20px;
  margin: 20px;
}

ul li label {
  padding: 20px;
  cursor: pointer;
}

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<div class="modify-box">
  BOX TO CHANGED
</div>
<ul>
  <li>
    <label for="vehicle1"> Bike</label><br>
  </li>
  <li>
    <label for="vehicle2"> Car</label><br>
  </li>
  <li>
    <label for="vehicle3"> Boat</label><br>
  </li>
</ul>

Answer 2

仅使用 CSS 这是不可能的。您受到当前选择器的限制，并且 CSS 中没有父选择器。你可以使用一些 JS 来定位你想要的元素。

您希望复选框周围的框中发生什么？也许还有另一种解决方案，标签上带有

:before

或

:after

？

Answer 3

我认为你需要 JavaScript。如果没有选中复选框，您可以监听

change

事件和样式。

---

首先，您需要选择包含的列表元素并向其附加事件侦听器：

document.querySelector('ul').addEventListener('change', function(e) {...});

在侦听器的处理函数中，您必须检查是否有选中的复选框，并根据该检查样式您的

.modify.box

（或切换类，例如

.checked

）：

if (document.querySelector('input:checked')) {
  modify_box.classList.add('checked');
}
else {
  modify_box.classList.remove('checked');
}

如果您决定切换一个类，您需要将该类添加到您的 CSS 定义中。例如：

ul li input[type="checkbox"]:checked+label,
.checked {...}

工作示例：

const modify_box = document.querySelector('.modify-box');

document.querySelector('ul').addEventListener('change', function(e) {
  if (document.querySelector('input:checked')) {
    modify_box.classList.add('checked');
  }
  else {
    modify_box.classList.remove('checked');
  }
});

ul li {
  display: inline-block;
}

ul li input[type="checkbox"]:checked+label,
.checked {
  border: 2px solid gray;
  background-color: gray;
  color: #fff;
  transition: all .2s;
}

ul li {
  padding: 20px;
  margin: 20px;
}

ul li input[type="checkbox"] {
  display: absolute;
}

ul li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

ul li label {
  padding: 20px;
  cursor: pointer;
}

<div class="modify-box">
  BOX TO CHANGED
</div>
<ul>
  <li>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1"> Bike</label><br>
  </li>
  <li>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> Car</label><br>
  </li>
  <li>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
    <label for="vehicle3"> Boat</label><br>
  </li>
</ul>

Answer 4

与采用

has

选择器的浏览器基线不同，您的代码可以按照您的顺序运行。只需将

ul li input[type="checkbox"]:checked+label

行更改为

body:has(input[type="checkbox"]:checked) .modify-box {
  outline: 2px solid gray;
  background-color: gray;
  color: #fff;
  transition: all .2s;
}