纯CSS（无JS）方式确定是否选中了多个复选框

Question

使用仅 CSS和HTML，我尝试根据两个或多个复选框是否处于已检查（：已选中）状态，在内容中放置内容。当然，如果我只需要检查一个（基本上是“OR”情况），这很容易，但在这种情况下，我实际上需要“AND”逻辑。建议欢迎。

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/