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

Question

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");
    }
});

Does this answer your question? [jQuery checkbox checked state changed event](https://stackoverflow.com/questions/8423217/jquery-checkbox-checked-state-changed-event) — Skully, Nov 05 '21 at 20:06
@Skully I believe it may be deprecated? It is not working on my version of jQuery. — HJP, Nov 05 '21 at 20:49
Have you tried [the answer](https://stackoverflow.com/a/32060857/8982034) posted by applecrusher? I believe that might solve your problem. — Skully, Nov 05 '21 at 20:59

bZezzz · Accepted Answer · 2021-11-05T20:57:19.587

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>

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

1 Answers1