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
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);
}
This works for me and also triggers a change event:
const Chkinput = document.getElementById("laneFilter");
Chkinput.click();
(Tested in Chrome and Firefox)
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.
<input type="checkbox" id="laneFilter"/>
<script>
checkbox = document.getElementById("laneFilter");
checkbox.onclick = function(){
alert('lol');
};
checkbox.checked = true;
</script>
should also work
I cut it to 2 then work fine
$('#laneFilter').prop('checked','true');
$('#laneFilter').trigger('change');
Just call change function without parameters.
$('#laneFilter').change('change', function(){
debugger
...
}).change();
it works in "jquery": "3.3.1"
