我如何为选中和未选中的复选框设置事件处理程序？

Question

我正在使用 Bootstrap 5 & jQuery 3.6.0，我一直在努力寻找解决方案，但我发现的一切都没有用，因为它已经过时了。

我基本上想做的就是为选中或取消选中的复选框设置一个事件处理程序。该复选框是 Bootstrap 开关样式复选框。

我已经设法得到它，以便激活未选中部分的代码，但我认为它没有被正确激活。但是我无法得到它，所以事件在被检查时激活。

我的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>

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

Answer 1

使用.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?

javascript

checkbox

jquery

twitter-bootstrap