Kann jquery Funktion auf Checkbox überprüfen nicht überprüfen

Question

Ich habe ein Formular erstellt und versuche, eine Funktion auszulösen, wenn das Kontrollkästchen singular angeklickt wird, aber die Funktion, die ich verwende, wie unten gezeigt, funktioniert nicht. Im Grunde weist jede Antwort, die ich in Bezug auf diese Frage finden konnte, darauf hin, dass ich die gleiche Methode verwende, die ich verwende, aber ich muss hier etwas falsch machen.

<form> 
    <fieldset> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <div class="checkbox" id="check-3dAnimationVisualEffects"> 
      <input type="checkbox" id="filter-3dAnimationVisualEffects" name="3dAnimationVisualEffects" value="1" class="form-checkbox"/> 
      <label for="filter-3dAnimationVisualEffects" data-toggle="tooltip" data-placement="top"><span>3D Animation Visual Effects</span></label> 
     </div> 
     </div> 
    </div> 
    </fieldset> 
</form> 

<script> 
jQuery(document).ready(function($){ 
    if ($('#filter-3dAnimationVisualEffects').is(':checked')) { 
    alert("Checked!"); 
    } 
}); 
</script> 

Wie kann ich diese Funktion ausführen, wenn das Kontrollkästchen aktiviert ist?

Answer 1

Sie sollten Event-Handler-Funktion für Click-Ereignis mit .on() wie anhängen:

jQuery(document).ready(function($){ 
 
    $('#filter-3dAnimationVisualEffects').on('click', function(){ 
 
    alert($(this).is(':checked')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <fieldset> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="checkbox" id="check-3dAnimationVisualEffects"> 
 
      <input type="checkbox" id="filter-3dAnimationVisualEffects" name="3dAnimationVisualEffects" value="1" class="form-checkbox"/> 
 
      <label for="filter-3dAnimationVisualEffects" data-toggle="tooltip" data-placement="top"><span>3D Animation Visual Effects</span></label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </fieldset> 
 
</form>

Answer 2

Ihre Form und jQuery-Funktion gut funktionieren, aber es ist ein Missverständnis, wie Sie Ihren Code Logik tatsächlich funktionieren:

if ($('#filter-3dAnimationVisualEffects').is(':checked')) { 
    alert("Checked!"); 
} 

Diese Bedingung funktioniert nur, wenn das Kontrollkästchen bereits aktiviert ist ed, bevor diese jQuery-Funktion ausgeführt wird.

Wenn Sie versuchen, zu überprüfen, und deaktivieren Sie es dann, es wird nicht, wie Sie arbeiten erwartet

Sie sollten ein Click-Ereignis Callback-Funktion hinzufügen, eine Aktion auszuführen, wenn ein Kontrollkästchen aktiviert ist oder nicht markiert:

$('#filter-3dAnimationVisualEffects').on('click', function(){ 
    if ($(this).is(':checked')) { 
     alert("Checked!"); 
    } 
}); 

Answer 3

Versuchen Sie dies, Sie können Ereignisse auch auslösen, wenn es nicht markiert ist.

$(document).ready(function() { 
 
    $('#filter-3dAnimationVisualEffects').on('change', function() { 
 
    if ($(this).is(':checked')) 
 
     alert('checked'); 
 
    else 
 
     alert('not checked'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<form> 
 
    <fieldset> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="checkbox" id="check-3dAnimationVisualEffects"> 
 
      <input type="checkbox" id="filter-3dAnimationVisualEffects" name="3dAnimationVisualEffects" value="1" class="form-checkbox" /> 
 
      <label for="filter-3dAnimationVisualEffects" data-toggle="tooltip" data-placement="top"><span>3D Animation Visual Effects</span></label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </fieldset> 
 
</form>