純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/