如何在只有HTML和CSS的情况下通过一个按钮选择所有复选框
如何在只有HTML和CSS的情况下通过一个按钮选择所有复选框
提问于 2018-06-05 03:03:46
有没有人看过一个不带任何javascript或jquery就选中所有复选框的例子？如果是这样的话，有没有人可以给我展示一个例子或者一个已经看到过这个的网站？
提前谢谢你
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-05 03:28:25
虽然这可能是你应该使用JavaScript来做的事情(很少有人会禁用它，而且用<noscript>添加一条消息来告诉人们打开它是非常简单的)，但与其他人所说的相反，我相信使用一点CSS魔法是可能的。
在这里，我有两组复选框，这两组复选框对最终用户来说是相同的。选中“选中两个框”复选框时，将显示预先选中的复选框。否则，将显示第一组。在服务器端，检查“选中两个框”复选框的状态，看看应该忽略哪一组。
#bothChecked {
display: none;
}
#bothBox:checked ~ #bothChecked{
display: block;
}
#bothBox:checked ~ #bothUnchecked{
display: none;
}<form>
<input type="checkbox" id="bothBox"> Check both boxes<br>
<div id="bothUnchecked">
<input type="checkbox"> Checkbox 1<br>
<input type="checkbox"> Checkbox 2
</div>
<div id="bothChecked">
<input type="checkbox" checked disabled> Checkbox 1<br>
<input type="checkbox" checked disabled> Checkbox 2
</div>
</form>
Stack Overflow用户
发布于 2018-06-05 03:33:56
@spacer gif在我为你做Codepen的时候速度更快。我只能重复他说的话。这太让人头疼了，但做起来很有趣。
https://codepen.io/nemanjaglumac/pen/BVKNoM
<div class="container">
<input type="checkbox" id=trigger>
<label for="trigger">
<button class="button">Button</button>
</label>
<div class="checked">
<input type="checkbox" id="firstChecked" checked>
<label for="firstChecked">First</label>
<input type="checkbox" id="secondChecked" checked>
<label for="secondChecked">Second</label>
</div>
<div class="unchecked">
<input type="checkbox" id="firstChecked">
<label for="firstChecked">First</label>
<input type="checkbox" id="secondChecked">
<label for="secondChecked">Second</label>
</div>
</div>同样，如果您想要完全控制，请使用JS。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50687180
复制相关文章
相似问题
腾讯云开发者
