How to trigger event on target's sibling

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

score 0 · Accepted Answer · answered Aug 04 '18 at 18:27

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

score 0 · Answer 2 · answered Aug 04 '18 at 18:27

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?

score 0 · Answer 3 · answered Nov 16 '20 at 03:40

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

How to trigger event on target's sibling

Checkbox Accesibility Need

3 Answers3