Wie kann ich verlangen, dass mindestens ein Kontrollkästchen aktiviert wird, bevor ein Formular gesendet werden kann?

Lesezeit: 11 Minuten

Wie kann ich verlangen dass mindestens ein Kontrollkastchen aktiviert wird
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?

<p>Box Set 1</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>

  • 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

1641744604 608 Wie kann ich verlangen dass mindestens ein Kontrollkastchen aktiviert wird
Jason R

Hier ist ein Beispiel mit jquery und Ihrem HTML.

<html>
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
$(document).ready(function () {
    $('#checkBtn').click(function() {
      checked = $("input[type=checkbox]:checked").length;

      if(!checked) {
        alert("You must check at least one checkbox.");
        return false;
      }

    });
});

</script>

<p>Box Set 1</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
   <li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>

<input type="button" value="Test Required" id="checkBtn">

</body>
</html>

  • 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>

Hörer ändern:

$(function(){
    var requiredCheckboxes = $('.browsers :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});

  • 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


1641744604 656 Wie kann ich verlangen dass mindestens ein Kontrollkastchen aktiviert wird
StapelPusher

Dies sollte das haben, was Sie brauchen, schauen Sie sich die jsfiddle unten an:

$(document).ready(function () {
$('#txt').val($("input[type=checkbox]:checked").length);
$('#txt2').val($("input[type=checkbox]").length);

$('input[type=checkbox]').change(function () {
checked = $("input[type=checkbox]:checked").length;
$('#block').show();
$('#block2').hide();
if (checked > 0) {
  $('#block').hide();
  $('#block2').show();
  $('#txt').val(checked);
 }
});
});

  • Was passiert, wenn Javascript deaktiviert ist?

    – Dynlight

    6. März ’14 um 23:35

  • +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

1641744604 870 Wie kann ich verlangen dass mindestens ein Kontrollkastchen aktiviert wird
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!' );
        }   
}

Geige

Dieser Code & Antwort von Vell

<ul>
    <li><input class="checkboxes" name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
    <li><input class="checkboxes" name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
    <li><input class="checkboxes" name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
    <li><input class="checkboxes" name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>

<script type="text/javascript">
$(document).ready(function(){
    var checkboxes = $('.checkboxes');
    checkboxes.change(function(){
        if($('.checkboxes:checked').length>0) {
            checkboxes.removeAttr('required');
        } else {
            checkboxes.attr('required', 'required');
        }
    });
});
</script>

  • dies sollte die richtige gewählte Antwort sein

    – Restie

    31. August ’21 um 1:36

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…

Jquery bietet auch mehrere Validierungsbibliotheken. Kasse: http://jqueryvalidation.org/

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

Wie kann ich verlangen dass mindestens ein Kontrollkastchen aktiviert wird
Parth Patel

Damit können Sie in verschiedenen Checkbox-Gruppen oder mehreren Checkboxen überprüfen, ob mindestens eine Checkbox aktiviert ist oder nicht.

Bezug : Verknüpfung

<label class="control-label col-sm-4">Check Box 1</label>
    <input type="checkbox" name="checkbox1" id="checkbox1" value=Male /> Male<br />
    <input type="checkbox" name="checkbox1" id="checkbox1" value=Female /> Female<br />

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox3" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox3" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox1]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 1 can not be null";
        return false;
    }
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>

.

224020cookie-checkWie kann ich verlangen, dass mindestens ein Kontrollkästchen aktiviert wird, bevor ein Formular gesendet werden kann?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy