How to trigger checkbox click event even if it's checked through Javascript code?
192,948
Solution 1
You can use the jQuery .trigger()
method. See http://api.jquery.com/trigger/
E.g.:
$('#foo').trigger('click');
Solution 2
Getting check status
var checked = $("#selectall").is(":checked");
Then for setting
$("input:checkbox").attr("checked",checked);
Solution 3
You can use .change()
function too
E.g.:
$('form input[type=checkbox]').change(function() { console.log('hello') });
Solution 4
You can also use this, I hope you can serve them.
$(function(){
$('#elements input[type="checkbox"]').prop("checked", true).trigger("change");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="elements">
<input type="checkbox" id="item-1" value="1"> Item 1 <br />
<input type="checkbox" id="item-2" value="2" disabled> Item 2 <br />
<input type="checkbox" id="item-3" value="3" disabled> Item 3 <br />
<input type="checkbox" id="item-4" value="4" disabled> Item 4 <br />
<input type="checkbox" id="item-5" value="5"> Item 5
</div>
Solution 5
no gQuery
document.getElementById('your_box').onclick();
I used certain class on my checkboxes.
var x = document.getElementsByClassName("box_class");
var i;
for (i = 0; i < x.length; i++) {
if(x[i].checked) x[i].checked = false;
else x[i].checked = true;
x[i].onclick();
}
Related videos on Youtube
Comments
-
Jishnu A P over 3 years
I have many checkboxes in my page and there is a select all checkbox which checks all the checkboxes. Somehow I want to emulate that click event of checkbox even if it's checked/unchecked through select all button. How can I do it?
-
Kevin Babcock over 10 yearsYou can also just call
$('#foo').click()
, which effectively does the same thing. -
EvilDr over 9 yearsNot tried this with
attr
as I useprop
nowadays, but this method only checks the boxes, it does not fire the click event for each afterwards -
Paul about 9 yearsHow to do this with pure JavaScript?
-
rogerdpack about 7 yearsappears
trigger('click')
toggles the current value. If you want to just set it then setchecked
to true then call triggerHandler(...) stackoverflow.com/questions/10268222/… -
Wancieho about 5 yearsHow exactly do posts like this get marked as correct when they require using a 3rd party? He did not ask for a jQuery solution.
-
Mark Robinson about 5 years@Wancieho The question is tagged 'jquery'.
-
Yilmaz over 4 yearsCAN U EXPLAIN YOUR CODE
-
Flimm over 4 yearsThis does not work for me when the checkbox change is done through Javascript.
-
mihca about 4 years@Wancieho jQuery is javascript and it was not explicitly forbidden to use a 3rd party library solution. Hence the answer is a valid solution. Furthermore, jQuery is a very widespread library so many people with the same question will benefit from the answer. Finally, by pointing to a working solution the OP can dig deeper and check what jQuery is doing to come up with an own implementation.
-
Wancieho about 4 years@mihca firstly JavaScript !== jQuery. jQuery is a library written in JavaScript. Furthermore, I know it's widespread (yet fading away with the introduction of JS frameworks). I originally responded based on the fact that I didn't see the tag which Mark pointed out. I myself was looking for a pure JS solution for Angular and stumbled upon this question. To include jQuery to perform 1 operation is ludicrous but as I've said in this instance I missed the jQuery tag so the answer is valid.