html - 如何使用仅 HTML 和 CSS 的一个按钮选择所有复选框

Question

有没有人看过一个没有任何javascript或jquery选择所有复选框的例子？如果是这样，是否有人可以向我展示一个例子或一个已经看到这个的网站？

先感谢您

标签： htmlcsscheckbox

Answer 1

尽管这是您可能应该使用 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>