I have built a form and am trying to trigger a function when the singular checkbox is clicked, but the function I am using as shown below does not work. Basically every response I could find related to this question points to using the same method that I am using from what I can tell, but I must be doing something wrong here.
<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>
How can I get this function to run when the checkbox is checked?
You should attach event handler function for click event using .on() like:
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With