Watch for change of the input[type=“checkbox”]

Question

How can I run a function on checkbox change?

I\'m trying to write small checkbox replacing function base on that - but I\'m doing something wrong.

Code:

Answer 1

Is this what you want? I am under the impression that you are over-complicating things.

$('input[type="checkbox"]').change(function() {
    alert ("The element with id " + this.id + " changed.");
});

Answer 2

You have some typos and errors in your script.

if($('.checbox').prop('checked', false) === true)
//         ^                   ^^^^^^^^^^^^^^^^^

should be

if(this.prop('checked'))

if($('.checkbox').prop('checked')) would work too of course, but why select the element again, if you already made it a plugin and the element is available via this?

And

$('.checbox').bind('change', function(){
//      ^

should be

$('.checkbox').bind('change', function(){
//      ^

Working demo: http://jsfiddle.net/fkling/yGBAK/40/

That said, it is better (more logical) to add and remove a class than changing the ID of the element.

Answer 3

$('.checkbox').change(function(){
    alert('changed');
})

I usedthe class you placed on the checkbox (.checkbox) for this. It detects a change in the state of the checkbox (this works for other inputs as well)

The example I included alerts 'changed' one the checkbox is clicked or unclicked.

If you want to know if it is checked or not every time then:

$('.checkbox').change(function(){
    if($(this).is(':checked')){
        alert('checked');
    } else {
        alert('not checked');
    }
});

Answer 4

Try this:

$('input[type=checkbox]').change(function() {
    alert("I'm changed!");
});

Or

$('input[type=checkbox]').change(function() {
    if ($(this).is(':checked')) {
        alert('I\'\m --> checked');
    } else {
        alert('I\'\m --> unchecked');
    }
});

Answer 5

In your example the selector uses checbox, should be ".checkbox"

I modified your example so it works: http://jsfiddle.net/yGBAK/41/

I swapped the ids for elements.