Ein Checkbox als Pflichtfeld?

Hallo, für ein Formular benötige ich ein Pflichtfeld!

Mann muss 1 der drei Checkboxen auf jeden Fall auswählen. Egal ob Husten, Gliederschmerzen, Schnupfen.

Benötige dafür eine JavaScript Code. Kann mir da jemand Helfen?

Danke.

Answer 1

[Babelfish]

Geht sicherlich auch noch etwas kürzer aber auf die Schnelle wäre es so machbar:

https://jsfiddle.net/Babelfisch/fph5o18x/15/

HTML

<div class="auswahl">
  <div>
    <input type="checkbox" name="husten" id="husten" value="1"> <label for="husten">Husten</label>
  </div>
  <div>
    <input type="checkbox" name="gliederschmerzen" id="gliederschmerzen" value="1"> <label for="gliederschmerzen">Gliederschmerzen</label>
  </div>
  <div>
    <input type="checkbox" name="schnupfen" id="schnupfen" value="1"> <label for="schnupfen">Schnupfen</label>
  </div>
  <div class="info">
    <p>Bitte wählen Sie mindestens eines der Felder aus!</p>
  </div>
</div>

CSS

.auswahl {
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  border: 1px solid silver;
  border-radius: 6px;
}

Javascript

document.addEventListener("DOMContentLoaded", () => {
  const checkAuswahl = () => {
    let count = 0;
    
    document.querySelectorAll(".auswahl input[type=checkbox]").forEach((checkbox) => {
      count += checkbox.checked ? 1 : 0;
    });
    
    document.querySelector(".auswahl .info").style.display = (count > 0 ? "none" : "block");
  };

  document.querySelectorAll(".auswahl input[type=checkbox]").forEach((checkbox) => {
    checkbox.addEventListener("change", (el) => {
      checkAuswahl();
    });
  });
});

Woher ich das weiß: Berufserfahrung – Entwickle seit > 20 Jahren Anwendungen mit PHP.

Answer 2

[Lenzer66u]

nimm lieber sowas würde ich sagen. Aber wenn es unbedingt eine Checkbox sein muss schreib mir nochmal dann sag ich dir wie.

<select>: The HTML Select element - HTML: HyperText Markup Language | MDN (mozilla.org)

Woher ich das weiß: eigene Erfahrung

Comments

[maetin944]

es soll leider Checkbox sein.

[PWolff]

Vermutlich ist Mehrfachauswahl gewünscht, also sollte man das "multiple"-Attribut setzen: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple