JQuery - Checkbox on-change event doesn't fire if checked using JQuery

Question

I have this Check All function which check all check boxes. I use JQuery to do that.

But I also have this on change function that toggle a class to the wrapper div:

$('input[type="checkbox"]').on('change', function(){
    $(this).closest('div').toggleClass('highlight');
});

That function runs when I click the Checkbox, but not if I click Check all.

Is there any way to manually fire an event using JQuery? Or is there better solution?

Thanks

EDIT:

Here's the simplified HTML:

<a id="check_all">Check All</a>
<div>
    <input type="checkbox" name="cb" value="abc">ABC<br>
</div>
<div>
    <input type="checkbox" name="cb" value="pqr">PQR<br>
</div>
<div>
    <input type="checkbox" name="cb" value="xyz">XYZ<br>
</div>

Here's the JSFiddle

http://jsfiddle.net/DarcFiddle/d4VTh/

u can use trigger or u can post more of ur code here so i/we can help you more. — Vond Ritz
– Vond Ritz, Commented Jun 3, 2013 at 8:05
How do you know that the function did not run? Have you checked with the debugger? — Andrei
– Andrei, Commented Jun 3, 2013 at 8:07
@Andrei I have checked using console.log() and it only run when I directly click the checkbox. @all Wait, I will create the JSFiddle — hrsetyono
– hrsetyono, Commented Jun 3, 2013 at 8:20

visnu · Accepted Answer · 2013-06-03 08:45:28Z

52

After click check all you should call change() event like this

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").prop('checked', true).change();
    });
});

edited Jun 3, 2013 at 8:45

answered Jun 3, 2013 at 8:11

visnu

9356 silver badges16 bronze badges

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

4 Comments

hrsetyono Over a year ago

Sorry, I rewrite the code to simplify it. It doesn't have syntax error in real one.

hrsetyono Over a year ago

Sorry, that's not what I mean. You can check this JSFiddle I have just created

hrsetyono Over a year ago

PERFECT! With just a one word it works! Thank you very much good sir!

Andrew Over a year ago

Alternatively you can do $("input[type='checkbox']").click(); which will also unselect your checkboxes (whereas this answer keeps them checked but unhighlights them.)

woutr_be · Accepted Answer · 2013-06-03 08:09:00Z

3

This will trigger the change event, but only after you bind it first.

$('input[type="checkbox]').trigger('change');

answered Jun 3, 2013 at 8:09

woutr_be

9,75225 gold badges83 silver badges132 bronze badges

4 Comments

hrsetyono Over a year ago

I'm quite newb at JQuery, so I'm not sure what is binding. I will take a look later. But for this time, visnu's answer works fine.

woutr_be Over a year ago

@DarcCode, when you use .on(), you're binding or attaching an event to an element

hrsetyono Over a year ago

So since I use on(), does it mean that my code is already binded?

woutr_be Over a year ago

@DarcCode Exactly, but you can only use the trigger after it's binded, otherwise it won't trigger anything.

Farhan · Accepted Answer · 2013-06-03 08:08:26Z

0

You can try this,

$(document).on('change','input[type="checkbox]' ,function(){
     // $this will contain a reference to the checkbox
      var $this = $(this);   
    if ($this.is(':checked')){//To CHECK CHECK BOX IS CHECKED OR NOT
         $(this).closest('div').toggleClass('highlight');
    }
});

Hope It Helps,

answered Jun 3, 2013 at 8:08

Farhan

135 bronze badges

1 Comment

hrsetyono Over a year ago

Thank you for your time, but his one doesn't work. You can check visnu's answer for the perfect one.

Andrew · Accepted Answer · 2014-06-06 15:48:04Z

0

Almost identical to visnu's answer, but directly calling click() will fire all the click events bound by jQuery. If you demo this, you will see it also unchecks the boxes, whereas his answer simply removes the highlight while they remain clicked.

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").click();
    });
});

answered Jun 6, 2014 at 15:48

Andrew

1,65518 silver badges33 bronze badges

Comments

Seo · Accepted Answer · 2014-06-30 14:55:43Z

0

Check this fiddle modification of your code: http://jsfiddle.net/d4VTh/51/

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        if (this.checked)
            $(this).closest('div').addClass('highlight');
        else 
            $(this).closest('div').removeClass('highlight');
    });

    $("#check_all").on('click', function(){
        var item = $("input[type='checkbox']")
        item.prop('checked', !item.prop('checked')).change();
    });
});

answered Jun 30, 2014 at 14:55

Seo

265 bronze badges

Collectives™ on Stack Overflow

JQuery - Checkbox on-change event doesn't fire if checked using JQuery

5 Answers 5

4 Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest