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 5 · 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 1 · Answer 3 · answered Oct 17 '21 at 17:03

1

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

13,235
5
37
62

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,848
3
16
22

score -1 · Answer 5 · edited Jan 19 '15 at 09:25

-1

I cut it to 2 then work fine

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

edited Jan 19 '15 at 09:25

Izzy

6,510
5
37
76

answered Jan 19 '15 at 09:07

Amila

39
2

6

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

score -4 · Answer 6 · 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

32,743
20
155
172

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

check checkbox and trigger change event javascript

6 Answers6

Linked