单击复选框后，使用ID砂砾模板设置div

Question

我有个问题。我有一个简单的复选框，在html中看起来像

<label class="container__control--checkbox">
<input type="checkbox" checked="checked" id="presentation_full_screen" class="container__control" onchange="_handleMainLayout()" />
<span>CLICK</span>
</label>

所以当我点击复选框时，我会启动这种类型的脚本：

_handleMainLayout() {
const layoutContainer = <HTMLInputElement>document.getElementById("main_layout");
const hideCommunicationCheckbox <HTMLInputElement>document.getElementById("presentation_full_screen");
if (hideCommunicationCheckbox.checked) {
layoutContainer.removeAttribute("style");
} else {
layoutContainer.style.gridTemplateColumns = "1fr";
}
}

所以，如果复选框被选中，它在主布局(id:main_layout(上从1列到2列设置模板的id取决于此，并且它工作得很好。

但我想知道，css中有这样的选择器：checked和not((。所以问题是，id为main布局的元素在DOM树上，问题是我能用这些选择器或任何其他css/scs技巧来获得这个元素并切换这个网格模板列吗？

类似的东西

.container__control :checked {
//get div with ID and set its grid-template-colum
}
.container__control :not(:checked) {
//get div with ID and set its grid-template-colum
}

还是我只剩下JS解决方案？

Answer 1

您绝对只能使用CSS来实现这一点。"；技巧"；是插入<input>元素的位置。由于标签属性for，您不需要使<input>和<label>彼此靠近。然而CCD_ 5必须放置在CCD_；分支"；以便使用通用(~(或相邻(+(兄弟组合子。

#main_layout {
height: 20px;
background-color: red;
}
:checked + #main_layout {
background-color: blue;
}

<label for="checkox">Click me</label>
<input type="checkbox" name="" id="checkox" hidden>
<div id="main_layout"></div>

在这种情况下不需要:not()