Побитовая фильтрация
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: rgba(216, 191, 216, 1);
}
.hide{
display: none;
}
</style>
</head>
<body>
<p>Отобразить только имеющие отношение к</p>
<input type="checkbox" name="1" id="zel" value="001"><label for="zel" style="color: green">Зеленым</label>
<input type="checkbox" name="2" id="kras" value="010"><label for="kras" style="color: red">Красным</label>
<input type="checkbox" name="3" id="zhelty" value="100"><label for="zhelty" style="color: yellow">Желтым</label>
<ul>
<li data-color="001"><a style="color: green" href="">зеленый</a></li>
<li data-color="001"><a style="color: green" href="">зеленый</a></li>
<li data-color="001"><a style="color: green" href="">зеленый</a></li>
<li data-color="010"><a style="color: red" href="">красный</a></li>
<li data-color="010"><a style="color: red" href="">красный</a></li>
<li data-color="010"><a style="color: red" href="">красный</a></li>
<li data-color="010"><a style="color: red" href="">красный</a></li>
<li data-color="100"><a style="color: yellow" href="">желтый</a></li>
<li data-color="100"><a style="color: yellow" href="">желтый</a></li>
<li data-color="100"><a style="color: yellow" href="">желтый</a></li>
</ul>
<script>
window.addEventListener("DOMContentLoaded", function() {
var c = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(c, function(a) {
a.addEventListener("change", function() {
var a = [].reduce.call(c, function(b, a) {
return a.checked ? b | a.value : b
}, 0);
[].forEach.call(document.querySelectorAll("[data-color]"), function(b) {
b.dataset.color & a ? b.classList.remove("hide") : b.classList.add("hide")
})
})
})
});
</script>
</body>
</html>
