Stellen Sie sicher, dass mindestens ein Kontrollkästchen für mehrere Gruppen von Kontrollkästchen aktiviert ist.

Question

Ich habe mehrere Gruppen von Kontrollkästchen (jeweils mit mehreren Kontrollkästchen), und ich muss jQuery (oder einfach altes Javascript) verwenden, um sicherzustellen, dass das Formular nicht senden kann, wenn mindestens 1 Kontrollkästchen aus jeder Gruppe von Kontrollkästchen aktiviert ist. Wie kann ich das machen? Wenn Gruppe A nicht mindestens eins hat, würde ich einen Fehler mit der Angabe "Bitte wählen Sie mindestens eine aus Gruppe A", etc. usw. auswerfen. Danke!

Answer 1

Sie können dies umgehen, indem Sie eine CSS-Klasse definieren, um jedes Ihrer Kontrollkästchen-Elemente zu "gruppieren" und dann jede Gruppe zu überprüfen, ob mindestens eines der Elemente aktiviert ist, und den Benutzer entsprechend zu alarmieren.

könnten einige Beispiel-Markup wie folgt aussehen:

<form> 
    <pre>Group A</pre> 
    <input class='group-a' data-name='Group A' type='checkbox' value='1' /> 1 
    <input class='group-a' data-name='Group A' type='checkbox' value='2' /> 2 
    <pre>Group B</pre> 
    <input class='group-b' data-name='Group B' type='checkbox' value='1' /> 1 
    <input class='group-b' data-name='Group B' type='checkbox' value='2' /> 2 
    <pre>Group C</pre> 
    <input class='group-c' data-name='Group C' type='checkbox' value='1' /> 1 
    <input class='group-c' data-name='Group C' type='checkbox' value='2' /> 2 
    <hr /> 
    <input type='submit' /> 
    </form> 

Zusammen mit dem folgenden Bit von jQuery, die Ihre eigentliche Logik behandelt:

<script> 
    $(function(){ 
     $('form').submit(function(e){ 
      // Store each group that has been processed 
      var checkedGroups = []; 
      // Check each group 
      $(':checkbox[class^="group-"]').each(function(){ 
       // Store a reference to the current class 
       var currentGroup = $(this).attr('class'); 
       // If the current group hasn't been checked, check it 
       if($.inArray(currentGroup,checkedGroups) == -1){ 
        var atLeastOneChecked = $(':checkbox.' + currentGroup + ':checked').length > 0; 
        // If at least one isn't checked, alert the user 
        if(!atLeastOneChecked){ 
         // Alert the user and stop everything going forward 
         alert("Please ensure that at least one option from " + $(this).data('name') + " is checked."); 
         e.preventDefault(); 
         return false; 
        } 
        // If we have made it this far, then this group has been checked 
        checkedGroups.push(currentGroup); 
       }  
      }); 
     }); 
    }); 
    </script> 

Sie müssen CSS nicht unbedingt verwenden Klassen zur Handhabung der Auswahl. Sie können leicht data-* Attribute verwenden, um damit umzugehen, also liegt es nur an Ihren persönlichen Vorlieben.

Sie können see an example of this code in action here.