Wie überprüfe ich mit JS oder PHP welche HTML Checkbox in einem Form ausgewählt wurde, bevor es abgesendet wurde?

Wie in der Langen Frage geschrieben, ich suche Code der es mir ermöglicht über Java Skript oder PHP auszuwerten welche Checkbox geklickt wurde.

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="frei" align="center"><strong> Abteilung FF </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="workS" align="center"><strong> Abteilung W </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="MO" align="center"><strong> Abteilung O </strong></label><br>

Im allgemeinen Nutze ich bereits die Funktion in JS damit der User nur ein Element auswählen kann. Doch nun bräuchte ich eine Direkte Ausgabe je nachdem welches Element ausgewählt wurde. D.h. Ich suche eine Möglichkeit auszuwerten welches angeklickt wurde und dann möchte ich etwas ausführen über if, eles if, else.

Falls es helfen sollte hier habe ich die Begrenzung Methode für das anklicken.

   //Dieser Code überprüft ob drei Elemente ausgewählt wurden. Wenn dies der fall ist dann werden alle weiteren Element Blockiert.

   const groups = [...document.getElementsByClassName("radio-multichoice")].reduce((result, element) => {

 result[element.name] = result[element.name] || [];

 result[element.name].push(element);

 return result;

}, {});

for (const [name, elements] of Object.entries(groups)) {

 const limit = name.split(":")[name.split(":").length-1];

 for(const el of elements) {

  el.addEventListener("change", e => {

   if (elements.filter(x => x.checked).length > limit) {

     e.target.checked = false;

   }

  });

 }

}

Könnte mir dabei jemand Helfen, falls ihr nachfragen habt weil ich es mal wieder nicht richtig erklären konnte stellt bitte eine Nachfrage.

Answer 1

[regex9]

Du hängst an jede Checkbox bereits einen Listener an, der auf das change-Event reagiert. Den kannst du erweitern:

el.addEventListener("change", e => {
  if (elements.filter(x => x.checked).length > limit) {
    e.target.checked = false;
  }

  if (e.target.checked) {
    const value = e.target.value;

    if (value == "...") {
      // do something ...
    }
  }
});

Wenn die Box aktiviert wurde, kannst du bspw. den Wert des value-Attributs prüfen.

PS.: Das align-Attribut ist obsolet. Ersetze es mittels CSS (text-align).

Comments

[Tob210]

Was muss ich im Input eingeben damit die Funktion weiß welche Elemente überprüft werden sollen?

[regex9]

@Tob210

Derzeit wird jedes Element mit der Klasse radio-multichoice mit dem Listener ausgestattet.

Answer 2

[EinAlexander]

Wie überprüfe ich mit JS oder PHP welche HTML Checkbox in einem Form ausgewählt wurde, bevor es abgesendet wurde?

Für PHP: Indem man die Variablennamen so wählt, dass die Werte in ein Array eingelesen werden:

<form>
<input type="checkbox" name="abteilung[]" value="1">
<input type="checkbox" name="abteilung[]" value="2">
<input type="checkbox" name="abteilung[]" value="3">
<input type="submit">
</form>

Die Werte der angekreuzten Checkboxes stehen dann im Array $_GET['abteilung']

Alex