HTML Checkbox — toggle and multi-select (live demo)

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <!-- Always sent. Must come BEFORE the checkbox. -->
  <input type="hidden" name="newsletter" value="no">
  <label>
    <input type="checkbox" name="newsletter" value="yes">
    Send me the newsletter
  </label>

  <button type="submit">Send</button>
</form>

<!-- Unchecked: newsletter=no
     Checked:   newsletter=no&newsletter=yes -->

<label><input type="checkbox" id="all"> Select all topics</label>

<fieldset id="topics">
  <legend>Topics</legend>
  <label><input type="checkbox" name="topic" value="pricing"> Pricing</label>
  <label><input type="checkbox" name="topic" value="api"> API</label>
  <label><input type="checkbox" name="topic" value="security"> Security</label>
</fieldset>

<script>
  const all = document.getElementById("all");
  const boxes = [...document.querySelectorAll('#topics input[type="checkbox"]')];

  all.addEventListener("change", () => {
    boxes.forEach((box) => (box.checked = all.checked));
  });

  boxes.forEach((box) =>
    box.addEventListener("change", () => {
      const ticked = boxes.filter((b) => b.checked).length;
      all.checked = ticked === boxes.length;
      all.indeterminate = ticked > 0 && ticked < boxes.length;
    }),
  );
</script>

<fieldset id="topics">
  <legend>Which topics? (pick at least one)</legend>
  <label><input type="checkbox" name="topic" value="pricing"> Pricing</label>
  <label><input type="checkbox" name="topic" value="api"> API</label>
  <label><input type="checkbox" name="topic" value="security"> Security</label>
</fieldset>

<script>
  const boxes = [...document.querySelectorAll('#topics input[type="checkbox"]')];

  function checkGroup() {
    const ok = boxes.some((b) => b.checked);
    boxes[0].setCustomValidity(ok ? "" : "Pick at least one topic.");
  }

  boxes.forEach((b) => b.addEventListener("change", checkGroup));
  checkGroup(); // invalid until a box is ticked
</script>