如何在目标的兄弟姐妹上触发事件

Question

I have the below mark up and scripts. I have a span with rootnode as id and it's sibling is input checkbox.

my requirement is when i click on the span, input check box onchanange handler should call with the input event object.

pleas find the below code snippet as well as i have give codepen url with the example.

HTML

---

Checkbox Accesibility Need

<div>
  <span id="rootnode" role="checkbox" aria-checked="false">
  <span>i am bike</span>
</span>
<input tabindex="-1" type="checkbox" onchange="handleChange()" name="vehicle1" value="Bike">
</div>

JAVASCRIPT

---

document.getElementById("rootnode").addEventListener('click',this.handleclick);

function handleChange(e) {
  alert(1)
}

function handleclick(e) {
  alert('event fired..');
// how to call onchange handler handleclick with input event object.
}

Example URL : https://codepen.io/anon/pen/ejKqzy?editors=1010

Your help is highly appreciated.

Thank You!!!

Answer 1

You can simply create an event in the handler and then dispatch it, like so:

 document.getElementById("rootnode").addEventListener("click", this.handleclick); function handleChange(e) { alert(1); } function handleclick(e) { alert("event fired.."); if ("createEvent" in document) { let evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); document.querySelector("input[name=vehicle1]").dispatchEvent(evt); } else element.fireEvent("onchange"); }

 <div> <span id="rootnode" role="checkbox" aria-checked="false"> <span>i am bike</span> </span> <input tabindex="-1" type="checkbox" onchange="handleChange()" name="vehicle1" value="Bike"> </div>

CodePen: https://codepen.io/lucakiebel/pen/yqEmXP

Answer 2

You should create and dispatch the event manually:

var event = document.createEvent('Event');
event.initEvent("change", false, true);
var input = document.getElementsByName("vehicle1")[0];
input.dispatchEvent(event);

The documentation for creating an event is here and for initializing an event here .

For further information you can visit a similar post (possible duplicate): How can I trigger an onchange event manually?

Answer 3

Unless you're trying to do something something that isn't clear in your question/example, and if all you want is to have a label that trigger's the checkbox's event and have it be accessible, then you should use alabel element. There's two ways you can achieve this using just HTML and no JS:

Set the label's for attribute to the checkbox's id :

 function handleChange(opt) { alert(opt) }

 <label for="vehicle1">i am bike</label> <input tabindex="-1" type="checkbox" onchange="handleChange(1)" id="vehicle1" name="vehicle1" value="Bike">

Wrap the checkbox as a child of the label:

 function handleChange(opt) { alert(opt) }

 <label for="vehicle1">i am bike</label> <input tabindex="-1" type="checkbox" onchange="handleChange(1)" id="vehicle1" name="vehicle1" value="Bike">

Both solutions are far more standard and accessible.

https://codepen.io/jerred121/pen/dyXrGmB?editors=1010