Как выбрать все флажки с помощью одной кнопки только с HTML и CSS

Question

Кто-нибудь видел пример выбора всех флажков без javascript или jquery?Если да, если кто-нибудь может показать мне пример или сайт, где это было видно?

Заранее спасибо

Answer 1

@ 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.

Answer 2

Хотя это то, для чего вы, вероятно, должны использовать 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>