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:

(function($) {
    $.fn.checking = function() {
        if ($('.checbox').prop('checked', false) === true) {
            $('.new-checkbox').prop('id', 'unchecked');
        } else {
            $('.new-checkbox').prop('id', 'checked');
        }
    };
})(jQuery);


$(document).ready(function() {

    $('.checkbox').wrap('<div class="checkbox-wrapper"></div>');
    $('.checkbox-wrapper').append('<p class="new-checkbox">Blue = Checked, Red = Unchecked</p>');
    $('.checkbox').checking();
    $('.checbox').bind('change', function() {
        $(this).checking();

    });

});

PlayGround: LIVE DEMO

Quit tagging your titles please. We already have tags.

Lightness Races in Orbit
– Lightness Races in Orbit

2011-07-04 13:09:53 +00:00
Commented Jul 4, 2011 at 13:09 — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Jul 4, 2011 at 13:09

Jon · Accepted Answer · 2011-07-04 13:10:58Z

20

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.");
});

answered Jul 4, 2011 at 13:10

Jon

439k85 gold badges756 silver badges820 bronze badges

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

3 Comments

jAndy Over a year ago

input:checkbox selector will do just fine

Jon Over a year ago

@jAndy: Copy/paste will do just fine too. :)

Iladarsda Over a year ago

Yes. I've actually tried that one before - but did not work. I know know there an issue with if/else statement not .change(); Thanks!

Felix Kling · Accepted Answer · 2011-07-04 13:21:17Z

13

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.

edited Jul 4, 2011 at 13:21

answered Jul 4, 2011 at 13:15

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

1 Comment

Iladarsda Over a year ago

I was just about to look for an errors in the statement! Thanks Felix.

YonoRan · Accepted Answer · 2011-07-04 13:16:05Z

9

$('.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');
    }
});

answered Jul 4, 2011 at 13:16

YonoRan

1,7389 silver badges7 bronze badges

Comments

Anik Islam Abhi · Accepted Answer · 2015-07-13 02:27:31Z

3

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');
    }
});

edited Jul 13, 2015 at 2:27

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

answered May 23, 2015 at 4:57

fbarikzehy

5,5252 gold badges38 silver badges41 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2011-07-04 13:14:48Z

0

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.

answered Jul 4, 2011 at 13:14

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Collectives™ on Stack Overflow

Watch for change of the input[type="checkbox"]

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related