<h1>Check All to Accept Terms &amp; Conditions</h1>
<code>0 / 30 checked</code>
<form class="app"></form>

body {
  display: grid;
  gap: 1em;
  margin: 1em 0 0 0;
  place-items: center;
}
code {
  background: #222;
  border-radius: .25em;
  color: #EEE;
  padding: .5em 1em;
}
form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  inline-size: 100%;;
  margin-inline: auto;
  max-inline-size: 800px;
  row-gap: 3em;
}
h1 {
  font-family: ui-sans-setif, system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  margin: 0;
}

input[role=switch] {
  --_p: .0625em;
  --_fz: 3em;
  appearance: none;
  aspect-ratio: 1.8 / 1;
  background: var(--_bg, hsl(215, 0%, 50%));
  border-radius: 1em;
  box-sizing: border-box;
  font-size: var(--_fz);
  margin: 0;
  padding: var(--_p);
  transition: all .2s linear;
  width: 1em;
}
input[role=switch]::after {
  aspect-ratio: 1 / 1;
  background: var(--_circle-bg, hsla(0, 0%, 100%, 0.95));
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  transition: inherit;
}
input[role=switch]:checked {
  background: var(--_bg-c, hsl(215, 90%, 50%));
}
input[role=switch]:checked::after {
  translate: calc(1em - 100% - (2 * var(--_p))) 0;
}

const R = (min, max) => parseInt(Math.random() * (max - min) + min, 10);
const app = document.querySelector('.app');
const info = document.querySelector('code');
const total = 30;
document.body.style.backgroundColor = `hsl(${R(0,360)},${R(15,45)}%,${R(65,95)}%)`;
app.innerHTML = Array(total).fill().map(() => `
  <input type="checkbox" role="switch" style="--_bg:hsl(${R(0,360)},${R(35,95)}%,${R(35,65)}%);--_bg-c:hsl(${R(0,360)},${R(35,95)}%,${R(35,65)}%);--_fz:${R(1,10)}em;rotate:${R(0,360)}deg;">
`).join('');
app.addEventListener('change', e => {
  const length = app.querySelectorAll('input:checked').length;
  info.textContent = length < total ? `${length} / ${total} checked` : 'All checked! You made it!';
});