javascript - 创建一个像 html 复选框一样的 div

Question

我想在点击时打开/关闭 div(它应该像 html 复选框一样)并使用 css 进行可见的更改。这在没有 Javascript 的情况下是否可行，还是我必须使用 Javascript？

如果您创建了这样的脚本，请分享。

提前感谢您的帮助。

Answer 1

您可以仅使用 CSS 代码轻松完成此操作，方法是隐藏复选框并为其标签设置样式，如下所示:

HTML

<div id="checkboxes">
    <input type="checkbox" name="rGroup" value="1" id="r1" checked="checked" />
    <label class="whatever" for="r1"></label>
    <input type="checkbox" name="rGroup" value="2" id="r2" />
    <label class="whatever" for="r2"></label>
    <input type="checkbox" name="rGroup" value="3" id="r3" />
    <label class="whatever" for="r3"></label>
</div>

CSS

.whatever{
    background-color: red;
    display: inline-block;
    width: 100px;
    height: 100px;
}

#checkboxes input[type=checkbox]{
    display: none;
}

#checkboxes input[type=checkbox]:checked + .whatever{
    background-color: green;
}

您可以在这里查看这个简单的代码:
JSFiddle

希望这可以帮助! :)