html - 如何仅使用 HTML 和 CSS 一键选中所有复选框

Question

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

提前致谢

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>