Check when a checkbox has its state changed on Javascript

Question

I've created some checkboxes dynamically using JavaScript (below), any ideas on how to call a function when a checkbox is clicked (has its state changed)?

var eng_types = table[3].slice(3);
for(var i in eng_types) {
    var name = eng_types[i];

    // Create the necessary elements
    var label = document.createElement("label");
    var checkbox = document.createElement("input");
    var description = document.createTextNode(name);

    checkbox.type = "checkbox";     // Make the element a checkbox
    checkbox.value = name;          // Make its value "pair"
    checkbox.name = i;              // Give it a name we can check

    label.appendChild(checkbox);    // Add the box to the element
    label.appendChild(description); // Add the description to the element

    // Add the label element to your div
    document.getElementById('eng_options').appendChild(label);
}

Any ideas on how to make each checkbox appear on a new line would also be appreciated.

Thanks in advance!

possible duplicate of [jQuery checkbox checked state changed event](http://stackoverflow.com/questions/8423217/jquery-checkbox-checked-state-changed-event) — IronFlare, Apr 17 '15 at 22:57

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Using jQuery checkbox checked state changed event:

$("#i").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Since you're adding the elements dynamically, a more robust solution might be to use this (thanks to @IgorAntun for mentioning bind and on):

$(document).on("change", "#i", function() { 
    if(this.checked) {
        //Do stuff
    }
});

To add context to the comments: The above examples previously used the selector $("[name='i']"), because I was treating checkbox.name = i like a string, instead of the variable that it was.

With regards to making each checkbox appear on a new line, you could <p></p> tags, <br /> tags, <div></div> tags-- really any tag that groups elements or has spacing. Additionally, you could use CSS. This method is my favorite, because it allows the spacing of the checkboxed to be adjusted, which you can't do with HTML tags.

input {
    display: block;
    margin-top: 2px;
}

can't seem to make `[name='i']` work, only works if I specify the id of the checkbox. Ideas? — Hayley van Waas, Apr 17 '15 at 23:34
Oops, I totally overlooked that fact that that was a variable. I'd recommend using a constant id to reference each of them. (Why not `#i`? :)) — IronFlare, Apr 17 '15 at 23:55

score 0 · Answer 2 · edited May 23 '17 at 12:28

You could also also use .bind('change', [...]) or .on('change', [...]), as an alternative to @IronFlare's answer. Examples:

Using .bind('change'):

$('#item-to-check').bind('change', function() {
    if(this.checked) {
        // Element is checked
    } else {
        // Element is not checked
    }
});

Using .on('change'):

$('#item-to-check').on('change', function() {
    if(this.checked) {
        // Element is checked
    } else {
        // Element is not checked
    }
});

Also, I recommend checking out Matt's answer on What is best way to perform jQuery .change().

Check when a checkbox has its state changed on Javascript

2 Answers2