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?
Add a comment
|
7 Answers
You can use the jQuery .trigger() method. See http://api.jquery.com/trigger/
E.g.:
$('#foo').trigger('click');
7 Comments
Kevin Babcock
You can also just call
$('#foo').click(), which effectively does the same thing.
Paul
How to do this with pure JavaScript?
rogerdpack
appears
trigger('click') toggles the current value. If you want to just set it then set checked to true then call triggerHandler(...) stackoverflow.com/questions/10268222/…
Wancieho
How 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
@Wancieho The question is tagged 'jquery'.
|
Getting check status
var checked = $("#selectall").is(":checked");
Then for setting
$("input:checkbox").attr("checked",checked);
1 Comment
EvilDr
Not tried this with
attr as I use prop nowadays, but this method only checks the boxes, it does not fire the click event for each afterwardsYou can use .change() function too
E.g.:
$('form input[type=checkbox]').change(function() { console.log('hello') });
1 Comment
Flimm
This does not work for me when the checkbox change is done through Javascript.
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>
answered Jul 19, 2019 at 15:15
Learning and sharing
1,3983 gold badges28 silver badges50 bronze badges
Comments
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();
}
Comments
Trigger function from jQuery could be your answer.
jQuery docs says: Any event handlers attached with .on() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method. A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user
Thus best one line solution should be:
$('.selector_class').trigger('click');
//or
$('#foo').click();
Comments
$("#gst_show>input").change(function(){
var checked = $(this).is(":checked");
if($("#gst_show>input:checkbox").attr("checked",checked)){
alert('Checked Successfully');
}
});
