Wie kann ich verlangen, dass mindestens ein Kontrollkästchen aktiviert wird, bevor ein Formular gesendet werden kann?
Lesezeit: 11 Minuten
Jeff Morris
Ich habe eine Liste mit mehreren Kontrollkästchen. Der Benutzer kann alle überprüfen, aber mindestens einer sollte aktiviert sein, um das Senden des Formulars zu ermöglichen. Wie kann ich diese Anforderung durchsetzen?
Sie können PHP verwenden, um zu überprüfen, ob mindestens eines der Kontrollkästchen aktiviert ist. Sie möchten wahrscheinlich auch sicherstellen, dass Ihr für jedes Kontrollkästchen anders ist, da es sonst schwierig sein könnte, die Werte der Rückgabevariablen zu erhalten.
– TheShinyTuxedo
6. März ’14 um 23:29
Hatte ähnliches Problem. Gelöst mit: stackoverflow.com/a/37825072/1479143
Wenn das Kontrollkästchen nicht aktiviert ist, wird der Fehler angezeigt. Wenn das Kontrollkästchen nicht aktiviert ist, wird das Formular nicht gesendet?
– Jeff Morris
7. März ’14 um 3:25
Hoppla, wenn ein Formular mit Kästchen IS aktiviert ist, wird es nicht gesendet
– Jeff Morris
7. März ’14 um 4:32
Mein Beispiel enthält kein Formular-Tag oder keine Schaltfläche zum Senden. Das überlasse ich dir.
– Jason R
7. März ’14 um 6:27
Jason, wenn keine Kästchen angekreuzt sind, taucht der Fehler auf. Wenn das Kontrollkästchen aktiviert ist, wird das Formular nicht gesendet. Hier ist ein Beispiel: tylerwebdesigns.com/test/ckbox.html
– Jeff Morris
10. März ’14 um 6:18
Habe es endlich geschafft! Musste return false hinzufügen; if(!checked) { alert(“Sie müssen mindestens ein Kontrollkästchen aktivieren.”) return false; }
– Jeff Morris
10. März ’14 um 6:37
Machen Sie alle Kontrollkästchen required und füge hinzu change listener. Wenn ein Kontrollkästchen aktiviert ist, entfernen Sie required -Attribut aus allen Kontrollkästchen. Unten ist ein Beispielcode.
<div class="form-group browsers">
<label class="control-label col-md-4" for="optiontext">Select an option</label>
<div class="col-md-6">
<input type="checkbox" name="browser" value="Chrome" required/> Google Chrome<br>
<input type="checkbox" name="browser" value="IE" required/> Internet Explorer<br>
<input type="checkbox" name="browser" value="Mozilla" required/> Mozilla Firefox<br>
<input type="checkbox" name="browser" value="Edge" required/> Microsoft Edge
</div>
</div>
So einfach und gut verständlich unter allen Antworten!
– Miron
26. Okt ’20 um 8:52
Gibt es Probleme mit der Zugänglichkeit, wenn das Formular mit allen Eingaben geladen wird? required standardmäßig, wenn sie nicht wirklich alle benötigt werden?
– aronmoshe_m
4. Feb. ’21 um 22:48
Super danke – funktioniert einwandfrei! Ich habe festgestellt, dass ‘.change’ jetzt veraltet ist, also habe ich es durch ‘.on’ ersetzt, falls jemand das gleiche Problem hat!
– CallyB
29. Apr. ’21 um 19:34
Ein meiner Meinung nach bemerkenswerter Nachteil des Markierens aller (oder eines der) Kontrollkästchen mit dem required Attribut ist, dass, wenn der Benutzer versucht, die [invalid] Formulars kann der Benutzeragent (z. B. Chrome) dem Benutzer mitteilen, dass er “bitte aktivieren Sie dieses Kontrollkästchen, wenn Sie fortfahren möchten”, was eine irreführende Meldung für ein bestimmtes zufälliges Kontrollkästchen sein kann, normalerweise das erste in der Liste. Es ist nicht so, dass der Benutzer auswählen muss das (erste) Checkbox, sie müssen nur eine in der Liste auswählen. Die UX passt hier also nicht wirklich zum Design.
– amn
2. Mai ’21 um 10:19
@amn In diesem Fall können Sie die Nachricht ändern, die angezeigt wird, wenn das Formular gesendet wird und das Kontrollkästchen nicht aktiviert ist. Sie können den Text mit ändern setCustomValidity(text) in dem oninvalid Veranstaltung. Sie können diesen Link verwenden, um die Nachricht stackoverflow.com/questions/10361460/… zu ändern.
– Harshita Sethi
3. Mai ’21 um 4:59
StapelPusher
Dies sollte das haben, was Sie brauchen, schauen Sie sich die jsfiddle unten an:
+1, weil Javascript/jQuery einfacher/sinnvoller ist als die Verwendung von PHP. Es ist besser, dies zu überprüfen, bevor das Formular abgeschickt wird.
– Alexander Lozada
6. März ’14 um 23:45
…aber wenn Sie an Dynelights Kommentar unten denken, wäre es noch besser, beide zu verwenden, damit Sie niemand täuschen kann, wenn sie mit ihrem Javascript herumfummeln.
– Alexander Lozada
6. März ’14 um 23:56 Uhr
Ich muss beim Senden überprüfen. Es gibt viele andere Daten, die ich zurückgeben müsste, oder sie müssten von vorne beginnen.
– Jeff Morris
7. März ’14 bei 0:07
Wie füge ich ein Else in die js ein, wenn keines aktiviert ist, und unterbinde das Senden des Formulars? if (geprüft > 0) { $(‘#block’).hide(); $(‘#block2’).show(); $(‘#txt’).val(geprüft); } else { Kontrollkästchen nicht aktiviert }
– Jeff Morris
7. März ’14 um 0:09
collyg
Das Problem mit der oben akzeptierten Lösung besteht darin, dass die else-Bedingung beim Senden des Formulars (wenn ein Kontrollkästchen ausgewählt wurde) nicht zulässt, wodurch das Senden des Formulars verhindert wird – zumindest als ich es versucht habe.
Eine andere Lösung, die das gewünschte Ergebnis IMHO vollständiger bewirkt, habe ich hier entdeckt:
Stellen Sie sicher, dass mindestens ein Kontrollkästchen aktiviert ist
Code wie folgt:
function valthis() {
var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
var isChecked = false;
for (var i = 0; i < checkBoxes.length; i++) {
if ( checkBoxes[i].checked ) {
isChecked = true;
};
};
if ( isChecked ) {
alert( 'At least one checkbox checked!' );
} else {
alert( 'Please, check at least one checkbox!' );
}
}
Sie können dies entweder auf PHP-Ebene oder auf Javascript-Ebene tun. Wenn Sie Javascript und/oder JQuery verwenden, können Sie mit einem Selektor prüfen und validieren, ob alle Kontrollkästchen aktiviert sind…
Das Problem bei der Verwendung von Javascript zur Validierung besteht darin, dass es umgangen werden kann, daher ist es ratsam, auch den Server zu überprüfen.
Beispiel mit PHP und angenommen, Sie rufen eine PO auf
<?php
if( $_GET["BoxSelect"] )
{
//Process your form here
// Save to database, send email, redirect...
} else {
// Return an error and do not anything
echo "Checkbox is missing";
exit();
}
?>
dies sollte die richtige gewählte Antwort sein
– Restie
31. August ’21 um 1:36
Parth Patel
Damit können Sie in verschiedenen Checkbox-Gruppen oder mehreren Checkboxen überprüfen, ob mindestens eine Checkbox aktiviert ist oder nicht.
Sie können PHP verwenden, um zu überprüfen, ob mindestens eines der Kontrollkästchen aktiviert ist. Sie möchten wahrscheinlich auch sicherstellen, dass Ihr für jedes Kontrollkästchen anders ist, da es sonst schwierig sein könnte, die Werte der Rückgabevariablen zu erhalten.
– TheShinyTuxedo
6. März ’14 um 23:29
Hatte ähnliches Problem. Gelöst mit: stackoverflow.com/a/37825072/1479143
– thegauraw
15. Juni ’16 um 2:33