Ausgabe in ob Checkbox aktiviert ist

Question

ich folgende Funktion in Jquery geschrieben haben

<script> 
    function validateAppliesTo() 
    { 
     if ($("#collapseCat_row input:checkbox:checked").length > 0) 
     { 
      return true; 
     } else 
     { 
      swal({ 
       title: "", 
       text: "Please select any course for which the fee should apply! " 
      }); 

      return false; 
     } 

     if ($("#accordion_cat input:checkbox:checked").length > 0) 
     { 
      return true; 
     } else 
     { 
      swal({ 
       title: "", 
       text: "Please select any category! " 
      }); 

      return false; 
     } 

     return true; 
    } 
</script> 

Der obige Code funktioniert für #course_condition_row in Ordnung, aber nicht funktioniert für #accordion_cat.

In html

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h5 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion_cat" href="#collapseCat">Category</a> 
     </h5> 
    </div> 
    <div id="collapseCat" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
      <input name="student_category[]" class="cls_categories" id="General" value="3" type="checkbox">&nbsp;General<br> 
      <input name="student_category[]" class="cls_categories" id="Reserved" value="4" type="checkbox">&nbsp;Reserved<br> 
     </div> 
    </div> 

</div> 

Ich möchte das Formular validieren. Wenn in der Kategorie accordian kein Kontrollkästchen ausgewählt ist, sollte es false zurückgeben ...

Bitte helfen Sie mir !!!

Answer 1

Sobald die validateAppliesTo() - Funktionen eine return erreichen, wird der Rest dieser Funktion nicht ausgeführt. Daher wird nur der erste if/else behandelt und der zweite wird nicht behandelt.

In dem Code unten habe ich die return 's entfernt und die if() Aussagen geändert.

Entfernen kehrt

die return'Entfernen s wird sichergestellt, dass der gesamte Code ausgeführt wird.

chaning if() Aussagen

Wenn kein Kontrollkästchen aktiviert ist, .length 0 zurück, die in einer if() Anweisung true gleich ist. Durch Hinzufügen der ! vor der Aussage wird dieses Ergebnis umgekehrt. Kurz gesagt: Wenn keine aktivierten Kontrollkästchen gefunden werden, geben Sie diese if() Anweisung ein.

Ich änderte auch #accordion_cat zu #collapseCat, damit der JS dem HTML zur Verfügung stellt.

Ergebnis

Das Ergebnis ist, dass der swal() Code jetzt zweimal, wenn keine Kontrollkästchen aktiviert werden genannt wird. Ich weiß nicht, was diese Funktion tun soll, aber sei dir bewusst, dass es zweimal aufgerufen wird, und dass das zweite Mal das Ergebnis überschreiben könnte, wenn es beim ersten Mal aufgerufen wurde.

 
$(function() { 
 

 

 
    $("#validate").click(function() { 
 
    validateAppliesTo() 
 
    }); 
 
    
 
    function validateAppliesTo() 
 
    { 
 
     if (!$("#collapseCat_row input:checkbox:checked").length) 
 
     { 
 
      swal({ 
 
       title: "", 
 
       text: "Please select any course for which the fee should apply! " 
 
      }); 
 
     } 
 

 
     if (!$("#collapseCat input:checkbox:checked").length) 
 
     { 
 
      swal({ 
 
       title: "", 
 
       text: "Please select any category! " 
 
      }); 
 
     } 
 

 
    } 
 
    
 
    function swal(obj){ 
 
     console.debug('do swal with', obj); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h5 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion_cat" href="#collapseCat">Category</a> 
 
     </h5> 
 
    </div> 
 
    <div id="collapseCat" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
      <input name="student_category[]" class="cls_categories" id="General" value="3" type="checkbox">&nbsp;General<br> 
 
      <input name="student_category[]" class="cls_categories" id="Reserved" value="4" type="checkbox">&nbsp;Reserved<br> 
 
     </div> 
 
    </div> 
 

 
</div> 
 

 
<button id="validate">Validate</button>