golden_yuna,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.focus{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px ; background-color: #A9A9A9;
}
label{
display: block;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var node = document.querySelectorAll(".checkFocus"),
dat = document.querySelectorAll(".focus"),
all = document.querySelector(".all");
[].forEach.call(node, function(item, i) {
item.addEventListener("change", function() {
dat[i].style.display = this.checked ? "block" : "none";
all.checked = [].every.call(node, function(el) {
return el.checked
})
})
});
all.addEventListener("change", function() {
[].forEach.call(node, function(item, i) {
item.checked = all.checked;
dat[i].style.display = item.checked ? "block" : "none"
})
})
});
</script>
</head>
<body>
<label><input class="checkFocus" type="checkbox" checked="true"/>1</label>
<div class="focus">1</div>
<label><input class="checkFocus" type="checkbox" checked="true"/>2</label>
<div class="focus">2</div>
<label><input class="checkFocus" type="checkbox" checked="true"/>3</label>
<div class="focus">3</div>
<label><input class="all" type="checkbox" checked="true"/>all</label>
</body>
</html>
