90

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jishnu A P
  • 14,202
  • 8
  • 40
  • 50

7 Answers7

132

You can use the jQuery .trigger() method. See http://api.jquery.com/trigger/

E.g.:

$('#foo').trigger('click');
karim79
  • 339,989
  • 67
  • 413
  • 406
Mark Robinson
  • 13,128
  • 13
  • 63
  • 81
  • 14
    You can also just call `$('#foo').click()`, which effectively does the same thing. – Kevin Babcock Oct 07 '13 at 11:05
  • 2
    How to do this with pure JavaScript? – Paul Mar 22 '15 at 22:05
  • 8
    appears `trigger('click')` toggles the current value. If you want to just set it then set `checked` to true then call triggerHandler(...) http://stackoverflow.com/questions/10268222/jquery-checking-a-checkbox-and-triggering-javascript-onclick-event – rogerdpack Apr 22 '17 at 06:51
  • 2
    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. – Wancieho May 09 '19 at 11:27
  • @Wancieho The question is tagged 'jquery'. – Mark Robinson May 10 '19 at 14:23
  • @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. – mihca Mar 19 '20 at 15:54
  • @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. – Wancieho Mar 20 '20 at 21:22
18

Getting check status

var checked = $("#selectall").is(":checked");

Then for setting

$("input:checkbox").attr("checked",checked);
Vikas
  • 24,082
  • 37
  • 117
  • 159
Harish
  • 2,311
  • 4
  • 23
  • 28
  • 14
    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 afterwards – EvilDr Sep 18 '14 at 08:48
10

You can use .change() function too

E.g.:

$('form input[type=checkbox]').change(function() { console.log('hello') });
silviomoreto
  • 5,629
  • 3
  • 30
  • 41
8

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>
Learning and sharing
  • 1,378
  • 3
  • 25
  • 45
6

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();
   }
Harijs Krūtainis
  • 1,261
  • 14
  • 13
5

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();
-1
  $("#gst_show>input").change(function(){

    var checked = $(this).is(":checked");
    if($("#gst_show>input:checkbox").attr("checked",checked)){
      alert('Checked Successfully');
    }

  });
Raj Shekhar
  • 7
  • 1