如何在Bootstrap 5中使整个复选框模块可点击

Question

我长期以来一直在尝试使整个模块可点击，而不仅仅是复选框或标签。

如果你在 stackoverflow 上搜索这个问题，你可以找到这个问题 如何使整个自定义复选框/Div 可点击——不仅仅是标签 + 输入 但这不是我的情况。

这是一个自定义复选框，我想使用普通的复选框。

所以最后看看我在代码片段中尝试使用这段代码（一些 JavaScript 和 JQuery）

var checkboxes = []; //There are multiple checkboxes so an array it's needed to simplify [pretend nothing happened 😅]
checkboxes[0] = document.body.querySelector('#HEYY');
checkboxes[0].addEventListener('change', (e) => {
  console.log('CLICKED@'+Date.now());
});


$(document).ready(function() {
    $('.ma_checkbox_module').on('click', function(e) {
        //e.preventDefault();
        //e.stopPropagation();
        if (e.target.tagName == "DIV") {
        let checkbox = $(this).find('input');
            if (checkbox.prop('checked') == true) {
                checkbox.prop('checked', false);
            } else {
                checkbox.prop('checked', true);
            }
        }
    });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>


<center><!-- center tag it's deprecated, but who cares -->
<div class="user-select-none" style="background-color: #983229;">
        <div class="form-check ma_checkbox_module d-inline-block" style="background-color: #111111;">
            <input class="form-check-input" type="checkbox" value="" id="HEYY">
            <label class="form-check-label ms-3" for="HEYY" style="color: white;">HEYY</label>
        <!-- class .ms-3 is added specifically to create more space to simplify understanding of the example, but it's the same also if you remove it -->
        </div>
</div>
</center>

如您所见，它运行良好，但在某些情况下不会触发该事件。

如果单击标签和复选框之间的特定点，复选框会更改状态，但不会触发

change

事件。相反，单击标签或复选框会触发

change

。

如何在不改变HTML代码的情况下使其完美运行？

Answer 1

正如 @Anoop LL 所建议的，出现此问题是因为单击周围的

div

元素会通过 JavaScript 手动切换复选框状态，但不会触发单击复选框本身时通常会发生的

change

事件。要解决此问题，请在切换复选框后以编程方式显式触发

change

事件。

使用 JQuery 更新的 JavaScript 代码可能是：

$(document).ready(function () {
    $('.ma_checkbox_module').on('click', function (e) {
        if (e.target.tagName === "DIV") {
            let checkbox = $(this).find('input');
            checkbox.prop('checked', !checkbox.prop('checked')).trigger('change');
        }
    });
});

确实：

1. trigger('change')

   确保手动切换复选框的

   change

   属性后以编程方式触发

   checked

   事件。
2. 切换逻辑：

   checkbox.prop('checked', !checkbox.prop('checked'))

   干净地切换复选框的状态，无需额外的条件。

当您手动切换复选框时，您还负责触发任何关联的事件。

.trigger('change')

确保附加到

change

事件（如您的

addEventListener

）的任何侦听器都得到执行，无论复选框的状态如何更改。

现在，单击可点击模块中的任意位置（包括标签和复选框之间的间隙）将正确切换复选框并触发

change

事件。