Trigger a programmatically 'checked' checkbox with jQuery

Question

I want to trigger a programmatically checked checkbox. eg:

$(function(){
    //create a trigger that if a checkbox changes, eg is clicked/change show an alert
    $("#idCheckbox").on("change", function(){
        if($(this).is(':checked')){
            alert("Is checked!");
        }
    });

    //onload put it checked
    $("#idCheckbox").attr("checked", "checked");
});

The 'problem' is that if I check on load the checkbox by javascript the on() method is not triggered, and the alert is not shown.

The code above is an example, in fact the script which check the checkbox is not mine and I can't modify it.

I am using jQuery 1.8.0

Any suggestion?

Thanks in advance.

Have you tried using $('#idCheckbox').trigger('change'); (or click event)? Maybe it's not firing event, only changing state? — Justinas
– Justinas, Commented Jan 16, 2014 at 14:48
Programmatic changes (i.e. changes made by code rather than user interaction) don't trigger change events, unfortunately. — Anthony Grist
– Anthony Grist, Commented Jan 16, 2014 at 14:59
The change event isn't fired when an attribute of an element is modified. — hunter
– hunter, Commented Jan 16, 2014 at 14:59

hunter · Accepted Answer · 2014-01-16 14:57:26Z

9

Rather than setting the attribute to checked you can call click() on the checkbox to trigger the the event you had bound previously

$(function(){
    var $checkbox = $("#idCheckbox");
    $checkbox.on("change", function(){
        if(this.checked){
            alert("Is checked!");
        }
    });

    $checkbox.click();
});

example: http://jsfiddle.net/hunter/wpLb2/

edited Jan 16, 2014 at 14:57

answered Jan 16, 2014 at 14:52

hunter

63.7k19 gold badges115 silver badges115 bronze badges

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

1 Comment

Mikel Over a year ago

I can't do $("#idCheckbox").click(); Is another script different than mine which check the check-box. Thanks anyway

RononDex · Accepted Answer · 2014-01-16 15:02:22Z

1

You can move your inline defined function to global scope and call it:

function checkBoxClick(){
    if($(this).is(':checked')){
        alert("Is checked!");
    }
}

$(function(){
    //create a trigger that if a checkbox changes, eg is clicked/change show an alert
    $("#idCheckbox").on("change", checkBoxClick);

    // Trigger your click function
    checkBoxClick();    

    //onload put it checked
    $("#idCheckbox").attr("checked", "checked");


});

answered Jan 16, 2014 at 15:02

RononDex

4,19526 silver badges40 bronze badges

Comments

achinmay · Accepted Answer · 2016-09-06 10:57:50Z

1

When a checkbox is checked programmatically using javascript, onchange event does not get fired automatically. So the script that marks the checkbox as checked should call onchange event.

answered Sep 6, 2016 at 10:57

achinmay

314 bronze badges

Collectives™ on Stack Overflow

Trigger a programmatically 'checked' checkbox with jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related