通过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>