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?
This question is related to
javascript
jquery
checkbox
dom-events
You can use .change()
function too
E.g.:
$('form input[type=checkbox]').change(function() { console.log('hello') });
You can also use this, I hope you can serve them.
$(function(){_x000D_
$('#elements input[type="checkbox"]').prop("checked", true).trigger("change");_x000D_
});
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>_x000D_
_x000D_
<div id="elements">_x000D_
<input type="checkbox" id="item-1" value="1"> Item 1 <br />_x000D_
<input type="checkbox" id="item-2" value="2" disabled> Item 2 <br /> _x000D_
<input type="checkbox" id="item-3" value="3" disabled> Item 3 <br />_x000D_
<input type="checkbox" id="item-4" value="4" disabled> Item 4 <br />_x000D_
<input type="checkbox" id="item-5" value="5"> Item 5_x000D_
</div>
_x000D_
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();
}
$("#gst_show>input").change(function(){
var checked = $(this).is(":checked");
if($("#gst_show>input:checkbox").attr("checked",checked)){
alert('Checked Successfully');
}
});
Getting check status
var checked = $("#selectall").is(":checked");
Then for setting
$("input:checkbox").attr("checked",checked);
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();
Source: Stackoverflow.com