Clever Geek Handbook

Can't run jquery function on checkbox check

I have created a form and am trying to call a function when a single checkbox is clicked, but the function I am using as shown below does not work. Basically every answer 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 trigger this function when a checkbox is checked?

+3


source to share


3 answers


You have to attach an event handler function for the click event using . on () , for example:



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


+2


source


Your jQuery form and function are working fine, but there is a misunderstanding about how your code logic actually works:

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

This condition only works when the checkbox is already checked before executing this jQuery function.



If you try to check and then uncheck the box, it won't work as you expected

You have to add a click event callback function to take action when the checkbox is checked or unchecked:

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


source


Try this, you can also fire events when unchecked.

$(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>
Run code


0


source






More articles:


All Articles