0

There is this question about the clickable label,
what I'm trying to find out how to make clickable labels that are not check-in/out the
checkbox, but trigger separate event which effecting the checkbox.

This is the div with the checkboxes and labels:

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

What I like to find is when clicking on each label it will for example alert the id of this label.
I can't just write onclick on each label I need to attach dynamically to the onclick event trigger.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user63898
  • 29,839
  • 85
  • 272
  • 514
  • 2
    Welcome to Stack Overflow! After 12 years at SO it is time to visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Jul 12 '21 at 07:13
  • It is not clear what you mean by _not check-in/out the Checkbox_ – mplungjan Jul 12 '21 at 07:14
  • i mean that the label will fire an event when clicked and not affect the checkbox near the lable ( i guess it can be div or something also ) – user63898 Jul 12 '21 at 07:17
  • So you mean `but trigger separate event WITHOUT effecting the checkbox` – mplungjan Jul 12 '21 at 07:21
  • 1
    Just don't make it a label or remove the `for` or don't wrap it around the checkbox. What is the usecase here? – mplungjan Jul 12 '21 at 07:22
  • use case: when clicking the label it will open a new window, the checkbox will be only indicator that say this row is selected – user63898 Jul 12 '21 at 07:23
  • So have ` Open in new page` – mplungjan Jul 12 '21 at 07:26
  • @mplungjan no.. not that simple it is opening javascript dynamic windows on click – user63898 Jul 12 '21 at 07:29
  • Please post a [mcve] and explain what you expect to happen – mplungjan Jul 12 '21 at 07:30

1 Answers1

1

Try this:

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

       // PUT HERE WHAT YOU WANT TO DO WHEN THE 
      LABEL IS CLICKED
    })
 })
Abde Laziz
  • 119
  • 7