如何创建一个带有可点击标签的复选框，该标签触发单独的事件而不是 checkout/in 复选框

Question

关于可点击标签有这个question，
我想知道如何制作不是 check-in/out
的可点击标签复选框，但会触发影响复选框的单独事件。

这是带有复选框和标签的 div：

  <div class="containerSelectBox" id="multi_select">
                <input type="checkbox" /><label id="a1"> This is checkbox </label><br/>
                <input type="checkbox" /><label id="a2"> This is checkbox </label><br/>
                <input type="checkbox" /><label id="a3"> This is checkbox </label><br/>
                <input type="checkbox" /><label  id="a4"> This is checkbox </label><br/>
                <input type="checkbox" /><label  id="a5"> This is checkbox </label><br/>

            </div>

我喜欢发现的是，当点击每个标签时，它会例如提醒该标签的 ID。
我不能只在每个需要动态附加到 onclick 事件触发器的标签上写 onclick。

Answer 1

试试这个：

 const labels = document.querySelectorAll("label");
 labels.foreach(label => {
 label.addEventListener("click", event => {

       // PUT HERE WHAT YOU WANT TO DO WHEN THE 
      LABEL IS CLICKED
    })
 })

如何创建一个带有可点击标签的复选框，该标签触发单独的事件而不是 checkout/in 复选框

How to create a checkbox with a clickable label that trigger seperate event and not checkout/in the checkbox

html

javascript

checkbox

onclick

dom-events