如何在 boostrap-5 中选中/取消选中复选框时触发事件？

Question

我正在尝试在 boostrap-5 中创建一个下拉菜单，其中包含四个用于过滤数据的不同复选框。我需要找到一种方法来通过选中或取消选中任何选项来触发事件，以便能够打开或关闭过滤器。

我试过使用

onclick = "myFunction()"

但这会执行选中的操作，而不管复选框的状态如何。 到目前为止我所拥有的看起来像这样：

<div class="dropdown-checkbox">
    <button class="btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-mdb-toggle="dropdown" aria-expanded="false"> Filters </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li>
            <a class="dropdown-item" onclick = "filterNitrogen()" href="#">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="Checkme1" />
                    <label class="form-check-label" for="Checkme1">Nitrogen Level</label>
                </div>
            </a>
        </li>
        (3 more buttons go here with the same logic as the previous)...`
</div>

在这里，每次选中或取消选中“氮水平”复选框时，filterNitrogen() 函数都会触发。