Change of checkbox doesn't trigger function

Question

I have 2 checkboxes that one selects the other. Checkbox1 has a change event. However, when I check checkbox1 via checkbox2, the event on checkbox1 is not being triggered.

See jsfiddle.

$(document).ready(function() {
     $("#check1").change(arrangeWindow);
   $("#check2").click(function(){
      $("#check1").prop("checked", this.checked);
   });
});

function arrangeWindow() {
    console.log("Missing my baby");
}

<input type="checkbox" id="check1" value="value" />
<label for="chk">Checkbox 1</label>

<input type="checkbox" id="check2" value="value" />
<label for="chk">Checkbox 2 </label>

I can call arrangeWindow from check2 click function, but that's not smart.

How can I trigger the change event upon changing it via jquery?

Rory McCrossan · Accepted Answer · 2016-08-16 10:44:48Z

2

Programmatically changing the checked property does not raise an event on the element. If you need that behaviour you can use trigger('change') manually:

$(document).ready(function() {
  $("#check1").change(arrangeWindow);
  $("#check2").change(function(){
    $("#check1").prop("checked", this.checked).trigger('change');
  });
});

function arrangeWindow() {
  console.log("Missing my baby");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check1" value="value" />
<label for="chk">Checkbox 1</label>

<input type="checkbox" id="check2" value="value" />
<label for="chk">Checkbox 2 </label>

Also note that you should always use the change event when dealing with checkboxes and radios for accessibility reasons, as that event can be fired on the element using the keyboard.

edited Aug 16, 2016 at 10:44

answered Aug 16, 2016 at 10:42

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dejell Over a year ago

why is change preferred over click?

Rayon Over a year ago

Also jQ.change() could be sued instead of jQ.trigger('change') but it could come under Developers preference..

Rory McCrossan Over a year ago

@Rayon Yeah, that's more of a preference. I prefer trigger('event') as the purpose of the call is clearer.

Dejell Over a year ago

@RoryMcCrossan there is something weird with it. If my arrangeWindow() action takes half a second, the checkbox will be checked ONLY after the action is completed. this is very annoying. any way that it will first select the checkbox and then trigger the change?

Rory McCrossan Over a year ago

Put the call to arrangeWindow() in a setTimeout, like this: setTimeout(arrangeWindow, 1);

Collectives™ on Stack Overflow

Change of checkbox doesn't trigger function

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related