check checkbox and trigger change event javascript

Question

I want to trigger change event and check checkbox from javaScript not jQuery.
I am having issues with jQuery because of this Strange Behaviour.
What i used to do with jQuery is:

$('#laneFilter').prop('checked','true').trigger('change');

I want same to do with javaScript. This must be really simple but i could not find the way . please help thanks in advance

score 13 · Accepted Answer · answered Oct 30 '13 at 08:00

There's a couple of ways you can do this. The easiest method is to just call that function:

var Chkinput = document.getElementById("laneFilter");
Chkinput .onchange();

If you need it to simulate the real event in full, or if you set the event via the html attribute or addEventListener/attachEvent, you need to do a bit of feature detection to correctly fire the event:

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}

score 7 · Answer 2 · answered Nov 30 '20 at 10:49

The selected answer will only work if the event listener is registered by setting the onchange property of the element.

If it is not the case, you can use:

    let element = document.getElementById('laneFilter');
    let event = new Event('change');
    element.dispatchEvent(event);

score 7 · Answer 3 · answered Oct 17 '21 at 17:03

7

This works for me and also triggers a change event:

const Chkinput = document.getElementById("laneFilter");
Chkinput.click();

(Tested in Chrome and Firefox)

answered Oct 17 '21 at 17:03

mar10

14,320
5
39
64

Works. Smart. How didn't I think of that :D – Ahmad ElBullock Apr 28 '23 at 22:30

score 0 · Answer 4 · answered Oct 30 '13 at 07:57

0

<input type="checkbox" id="laneFilter"/>
<script> 
    checkbox = document.getElementById("laneFilter");
    checkbox.onclick = function(){ 
        alert('lol');
    };
    checkbox.checked = true;
</script>

should also work

answered Oct 30 '13 at 07:57

schnawel007

3,982
3
19
27

score 0 · Answer 5 · answered Mar 05 '23 at 03:22

In case someone else runs into this answer, the modern way to trigger a change event is by using the Event object.

    const checkboxElement = document.getElementById('highlightTables');

    checkboxElement.addEventListener('change', () => {
      console.log("something changed");
    });

    const event = new Event("change");
    checkboxElement.dispatchEvent(event);

See more information about this here.

score -2 · Answer 6 · edited Jan 19 '15 at 09:25

-2

I cut it to 2 then work fine

$('#laneFilter').prop('checked','true');
$('#laneFilter').trigger('change');

edited Jan 19 '15 at 09:25

Izzy

6,740
7
40
84

answered Jan 19 '15 at 09:07

Amila

37
2

6

The question said not to use jQuery. – spekary May 11 '19 at 15:52

score -4 · Answer 7 · answered Jun 13 '18 at 05:42

-4

Just call change function without parameters.

$('#laneFilter').change('change', function(){
        debugger
        ...
}).change();

it works in "jquery": "3.3.1"

answered Jun 13 '18 at 05:42

Yevgeniy Afanasyev

37,872
26
173
191

The question stated explicitly not to use jQuery. – Wesley Smits Sep 17 '19 at 13:23

check checkbox and trigger change event javascript

7 Answers7

Linked