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>

Answer 2

@ spacer-gif在我为你制作Codepen时速度更快。我只能重复他说的话。这太糟糕了，它会伤害：D 但这很有趣。

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。

如何选择所有复选框只有一个按钮，只有HTML和CSS

2 个答案: