使用 e.target 获取复选框的 id 和<label for="“…”"></label>

Question

I try to track the clicks on my website. Therefore I use e.target.id. When clicking on a label with for="mycheckbox" I will get the id of the label, not the checkbox. How can I get the for tag?

document.addEventListener('mousedown', function(e) {
  e = e || window.event;
  alert("checkbox with id: " + e.target.id.toString() + " checked"); //doesn't work with labels
, false);

Regards

Answer 1

You can get the for attribute by using e.srcElement.htmlFor or e.target.htmlFor .

PS - for is not a tag, it is an attribute. You can get value of any attribute by using getAttribute() .

Answer 2

Most probably, your lable will be the adjacent previous sibling of the input element. In this case, you can use previousElementSibling.id to get the id of the lable . Below is a snippet explaining the same -

 document.addEventListener('mousedown', function(e) { e = e || window.event; //Check if we have clicked on an input - if(e.target.outerHTML.includes("input")){ alert(e.target.previousElementSibling.id); } }, false);

 <lable for="check" id="lable">Check1</lable> <input type="checkbox" id="check" name="check"> <br> <br> <lable for="check2" id="lable2">Check2</lable> <input type="checkbox" id="check2" name="check2">

In this way, you can implement the same solutions with multiple inputs.