CODEWITHSUNDEEP
jquerycheckbox
Luke Wenke
Luke Wenke

Reputation: 1138

jquery checkbox change event

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.

http://jsfiddle.net/DC3EH/

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.

Upvotes: 4

Views: 8751

Answers (4)

Luke Wenke
Luke Wenke

Reputation: 1138

It seems to work perfectly:

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

I used .change()

Upvotes: 4

John Koerner
John Koerner

Reputation: 38087

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.

Upvotes: 0

Mark
Mark

Reputation: 5730

Have you tried triggering the click event?

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

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

Upvotes: 0

Mohamed Farrag
Mohamed Farrag

Reputation: 1692

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/

Upvotes: 0

Related Questions