：checked [duplicate]により、チェックボックスの親から要素に影響を与えます
Aug 22 2020
：checked css pseudo-classを使用して、チェックボックスの親から要素を非表示にします。どうすればそれができますか？私の問題の例があります：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="checkbox" name="checkbox" id="checkbox">
</div>
<div>
<span>Element to hide</span>
</div>
</body>
</html>
ありがとう！
回答
ihodonald Aug 22 2020 at 00:17
CSSだけを使用してそのようなDOMをトラバースすることはできません。JavaScriptが必要です。JavaScriptDOMトラバーサルよりも優れたCSSDOMトラバーサル？
SASSを使用して下向きにトラバースすることはできますが、スタック上で上向きにトラバースすることはできません。
document.getElementById("checkbox").onchange = (e) => {
let checked = e.target.checked;
if (checked) {
document.getElementById("element-to-hide").style.display = "none";
} else {
document.getElementById("element-to-hide").style.display = "block";
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="checkbox" name="checkbox" id="checkbox" >
</div>
<div>
<span id="element-to-hide">Element to hide</span>
</div>
</body>
</html>