jquery checkbox change event

Question

Hi I was wondering if there is an event for checkboxes that can be triggered by other code rather than by a user...

e.g.

For the "Choose All" checkbox, it should automatically also toggle the "selected" class to toggle the row's background colour.

I've tried "change" and "click" and that only is triggered by the user.

I commented out some code... BTW I want to have a lot of checkboxes that toggle certain classes of checkboxes so I want to avoid having lots of ".closest('tr').addClass('selected');" etc.

Luke Wenke · Accepted Answer · 2012-09-15 02:53:06Z

4

It seems to work perfectly:

http://jsfiddle.net/DC3EH/20/

I used .change()

answered Sep 15, 2012 at 2:53

Luke Wenke

1,1462 gold badges24 silver badges45 bronze badges

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

Comments

Mohamed Farrag · Accepted Answer · 2012-09-15 01:33:18Z

0

I'm not sure this is what you need, but what I figured is that all <tr> must changed to selected by check the "Choose All" checkbox. try this http://jsfiddle.net/DC3EH/5/

answered Sep 15, 2012 at 1:33

Mohamed Farrag

1,6922 gold badges19 silver badges41 bronze badges

1 Comment

Luke Wenke Over a year ago

In the full version certain rows are checked or unchecked depending on their attributes... so a closest('tr') would be used...

Mark · Accepted Answer · 2012-09-15 01:40:17Z

0

Have you tried triggering the click event?

.trigger("click") // for each checkbox

Example: http://jsfiddle.net/ELTRd/1/

answered Sep 15, 2012 at 1:40

Mark

5,7302 gold badges28 silver badges26 bronze badges

1 Comment

Luke Wenke Over a year ago

The group is the inverted version of the "Choose All" checkbox... also the yellow row colouring is inverted...

John Koerner · Accepted Answer · 2012-09-15 01:52:32Z

If you bind to the change event, you can trigger the click event in jquery which will check the checkbox and in turn fire the change event:

$(document).ready(function(){
    $('#check_all').click(function(event) {
        $('[name^="checkbox"]').trigger("click");
    });   

    $('[name^="checkbox"]').change(function(event) {
        console.log('a');
        if ($(this).is(":checked")) {
             $(this).closest('tr').addClass('selected');
        }
        else {
             $(this).closest('tr').removeClass('selected');
        }
    });    
});

Updated Fiddle: http://jsfiddle.net/DC3EH/19/

The reason I switched to the change event instead of the click event is how jquery processes the triggering of events. When you trigger click it will call your event handler before it changes the state of the checkbox. Binding to the change ensures your event doesn't get called until after the state has changed.

It doesn't seem to work in IE8. Also in Chrome and FF the "Choose All" checkbox just inverts the current selection... it should turn all the other checkboxes on or off depending on the "Choose All" checkbox state.

Collectives™ on Stack Overflow

jquery checkbox change event

4 Answers 4

Comments

1 Comment

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

2 Comments

Related