首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在只有HTML和CSS的情况下通过一个按钮选择所有复选框

如何在只有HTML和CSS的情况下通过一个按钮选择所有复选框
EN

Stack Overflow用户
提问于 2018-06-05 03:03:46
回答 2查看 3.4K关注 0票数 0

有没有人看过一个不带任何javascript或jquery就选中所有复选框的例子?如果是这样的话,有没有人可以给我展示一个例子或者一个已经看到过这个的网站?

提前谢谢你

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-05 03:28:25

虽然这可能是你应该使用JavaScript来做的事情(很少有人会禁用它,而且用<noscript>添加一条消息来告诉人们打开它是非常简单的),但与其他人所说的相反,我相信使用一点CSS魔法是可能的。

在这里,我有两组复选框,这两组复选框对最终用户来说是相同的。选中“选中两个框”复选框时,将显示预先选中的复选框。否则,将显示第一组。在服务器端,检查“选中两个框”复选框的状态,看看应该忽略哪一组。

代码语言:javascript
复制
#bothChecked {
  display: none;
}

#bothBox:checked ~ #bothChecked{
  display: block;
}

#bothBox:checked ~ #bothUnchecked{
  display: none;
}
代码语言:javascript
复制
<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>

票数 3
EN

Stack Overflow用户

发布于 2018-06-05 03:33:56

@spacer gif在我为你做Codepen的时候速度更快。我只能重复他说的话。这太让人头疼了,但做起来很有趣。

https://codepen.io/nemanjaglumac/pen/BVKNoM

代码语言:javascript
复制
<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。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50687180

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档