Bert McLees Bert McLees - 1 month ago 8
CSS Question

Pure CSS (no JS) way to determine if multiple checkboxes are checked

Using only CSS and HTML, I am trying to place content in a span based on whether two or more checkboxes are in a checked (:checked) state. It's easy enough of course if I only needed to check for one (basically an "OR" situation), but in this case, I effectively need "AND" logic. Suggestions welcome.

Answer

The following snippet is supported in modern browsers, according to 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/