Mehrere Kontrollkästchen sind mindestens 1 erforderlich

Ich habe eine Liste mit mehreren Kontrollkästchen. Benutzer können überprüfen, alle aber mindestens erforderlich. Nicht sicher, wie dies zu verwirklichen

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

InformationsquelleAutor der Frage Jeff Morrris | 2014-03-06

Hier ein Beispiel mit jquery und den html-Code.

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

InformationsquelleAutor der Antwort Jason R

Sollte dies haben, was Sie brauchen, schauen Sie sich die jsfiddle unten:

$(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);
 }
});
});

http://jsfiddle.net/wpgeek/arEdz/

InformationsquelleAutor der Antwort stackPusher

0

Können Sie entweder auf PHP-Ebene oder auf Javascript-Ebene. Wenn Sie Javascript und/oder JQuery, können Sie überprüfen, und überprüfen, ob alle Kontrollkästchen aktiviert sind mit einem Selektor...

Jquery bietet auch mehrere Validierungs-Bibliotheken. Check-out: http://jqueryvalidation.org/

Das problem mit Hilfe von Javascript zu validieren ist, kann es umgangen werden, so ist es ratsam zu prüfen, auf dem server zu.

Beispiel mit PHP, und vorausgesetzt, Sie anrufen, eine PO
```
<?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();
 }
?>
```
InformationsquelleAutor der Antwort Dynelight

Das Problem mit der akzeptierten Lösung oben ist, dass ist nicht erlaubt, für die else-Bedingung auf Formular Absenden (wenn ein Feld ausgewählt worden ist), wodurch verhindert wird, form - Unterordnung- zumindest, wenn ich es versuchte.

Entdeckte ich eine andere Lösung, dass die Effekte das gewünschte Ergebnis mehr vollständig IMHO, hier:

Sicherstellen, dass mindestens eine checkbox 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!' );
        }   
}

Fiddle

Code & Antwort von Vell

InformationsquelleAutor der Antwort collyg

Mit diesem können Sie überprüfen mindestens eine checkbox ausgewählt ist oder nicht, in anderen checkbox-Gruppen oder mehrere Kontrollkästchen.

Referenz : Link

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

InformationsquelleAutor der Antwort Parth Patel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.