Home How could I set up an event handler for my checkbox for checked and unchecked?

Questions

How could I set up an event handler for my checkbox for checked and unchecked?

November 5, 2021

I’m using Bootstrap 5 & jQuery 3.6.0 and I’ve been trying to find a solution but everything I have found hasn’t worked as it is super outdated.

All I’m essentially trying to do is have an event handler for the checkbox being either checked or unchecked. The checkbox is a Bootstrap switch style checkbox.

I’ve managed to get it so that the code for the unchecked part activates however I don’t think it’s being activated correctly. But I cannot get it so that event activates on being checked.

My HTML:

<div class="form-check form-switch" id="checkboxLondon">
              <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
              <label class="form-check-label" for="flexSwitchCheckDefault">London</label>
</div>

My jQuery/JS:

$('#checkboxLondon').click(function () {
    console.log("This works")
    if ($(this).is(":checked")){
      console.log("Checkbox is checked");
    } else if ($(this).is(":checked") == false) {    
      console.log("Checkbox is unchecked");
    }
});

>Solution :

Use .change() state handler ON your checkbox, NOT on the parent div then check when checkbox’s checked with .is()

$('#flexSwitchCheckDefault').change(function(){
  console.log($(this).is(':checked'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check form-switch" id="checkboxLondon">
              <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
              <label class="form-check-label" for="flexSwitchCheckDefault">London</label>
</div>