html - 纯CSS(无JS)方式判断是否选中多个复选框

Question

使用 only CSS 和 HTML，我试图根据两个或多个复选框是否处于选中 (:checked) 状态来将内容放置在一个跨度中。如果我只需要检查一个(基本上是“或”情况)，这当然很容易，但在这种情况下，我实际上需要“和”逻辑。欢迎提出建议。

Answer 1

根据 caniuse.com，现代浏览器支持以下代码段:

caniuse.com#search=checked

HTML

<input type="checkbox">
<input type="checkbox">
<div data-text="some string"></div>

CSS

div {
  width: 100px;
  height: 100px;
  background: red;
}

input[type=checkbox]:checked + input[type=checkbox]:checked + div {
  background: blue;
}
input[type=checkbox]:checked + input[type=checkbox]:checked + div:after {
  display: inline-block;
  content: attr(data-text);
  color: #fff;
}

https://jsfiddle.net/5ykks37L/1/