CODEWITHSUNDEEP
javascriptjquerycheckboxdom-events
Jishnu A P
Jishnu A P

Reputation: 14382

How to trigger checkbox click event even if it's checked through Javascript code?

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?

Upvotes: 93

Views: 227108

Answers (7)

Raj Shekhar
Raj Shekhar

Reputation: 7

  $("#gst_show>input").change(function(){

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

  });

Upvotes: -1

Learning and sharing
Learning and sharing

Reputation: 1388

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>

Upvotes: 9

user4466709
user4466709

Reputation:

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();

Upvotes: 5

Harijs Krūtainis
Harijs Krūtainis

Reputation: 1270

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();
   }

Upvotes: 6

Harish
Harish

Reputation: 2324

Getting check status

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

Then for setting

$("input:checkbox").attr("checked",checked);

Upvotes: 18

silviomoreto
silviomoreto

Reputation: 5897

You can use .change() function too

E.g.:

$('form input[type=checkbox]').change(function() { console.log('hello') });

Upvotes: 10

Mark Robinson
Mark Robinson

Reputation: 13278

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

E.g.:

$('#foo').trigger('click');

Upvotes: 135

Related Questions