通过选中状态的Checkbox修改页面特定元素的样式是否可行？

问题解答 #

1. Checkbox 可以控制其他元素/类的样式吗？ #

可以，纯CSS就能实现，仅受CSS选择器语法限制：CSS默认只能选中当前元素的后代、后续兄弟/后续兄弟的后代元素，无法直接选中父元素、当前元素之前的节点。如果要覆盖这个限制，可以用CSS :has() 选择器（现代浏览器支持）或者JavaScript实现。

2. 如何修改你代码里第一个div（.modify-box）的样式？ #

提供3种常见实现方案： #

方案1：用CSS :has() 选择器（无需修改现有HTML结构，Chrome 105+、Firefox 121+、Safari 15.4+均支持）

直接在你的CSS里新增以下代码即可：

/* 所有checkbox只要有一个选中，就修改modify-box样式 */
body:has(input[type="checkbox"]:checked) .modify-box {
  border: 2px solid gray;
  background-color: gray;
  color: #fff;
  padding: 20px;
  transition: all .2s;
}

/* 如果需要对应不同checkbox设置不同样式，可以单独指定 */
/* 勾选Bike时生效 */
body:has(#vehicle1:checked) .modify-box {
  background: lightblue;
  border-color: #165DFF;
}
/* 勾选Car时生效 */
body:has(#vehicle2:checked) .modify-box {
  background: lightgreen;
  border-color: #00B42A;
}
/* 勾选Boat时生效 */
body:has(#vehicle3:checked) .modify-box {
  background: lightyellow;
  border-color: #FF7D00;
}

方案2：调整HTML结构兼容旧浏览器

如果需要兼容不支持:has()的旧版本浏览器，只要把.modify-box移到ul标签的后面，就能用普通兄弟选择器实现：
调整后的HTML：

<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>
<!-- 把modify-box移到ul后面 -->
<div class="modify-box">
  BOX TO CHANGED
</div>

新增CSS代码：

/* 任意checkbox选中时生效 */
ul input[type="checkbox"]:checked ~ .modify-box {
  border: 2px solid gray;
  background-color: gray;
  color: #fff;
  padding: 20px;
  transition: all .2s;
}

方案3：用JavaScript实现（兼容性最好，无需修改HTML结构）

在页面末尾新增这段JS代码即可：

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const modifyBox = document.querySelector('.modify-box');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    // 判断是否有任意checkbox被选中
    const hasChecked = Array.from(checkboxes).some(item => item.checked);
    if (hasChecked) {
      // 自定义要修改的样式
      modifyBox.style.cssText = `
        border: 2px solid gray;
        background-color: gray;
        color: #fff;
        padding: 20px;
        transition: all .2s;
      `;
    } else {
      // 无选中时恢复默认样式
      modifyBox.style.cssText = '';
    }
  })
})

额外优化提示 #

你现有CSS里写了ul li input[type="checkbox"] { display: absolute; }，这行是无效代码（display没有absolute属性值），可以直接删除，避免冗余。

内容的提问来源于stack exchange，提问作者IyanAndru