Why isn't my checkbox change event triggered?

Question

I have two functions.

The first function translates a div click into a checked/unchecked toggle. The second function translates a checkbox change into a hide/show event.

The problem is that when I use the first function to check/uncheck the box, the second function is not called. I am new to javascript, thanks.

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").parent().click(function(evt) {
        if (evt.target.type !== 'checkbox') {
            var $checkbox = $(":checkbox", this);
            $checkbox.attr('checked', !$checkbox.attr('checked'));
            evt.stopPropagation();
            return false;
        }
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(":checkbox").change(function() {
        if($(this).attr("checked")) {
            $('.'+this.id).show();
        }
        else {
            $('.'+this.id).hide();
        }
    });
});
</script>

Matthew Manela · Accepted Answer · 2011-02-02 15:36:13Z

33

The change event does not fire when you programmatically change the value of a check box. What you can do to ensure it fires is:

 $(":checkbox").parent().click(function(evt) {
    if (evt.target.type !== 'checkbox') {
        var $checkbox = $(":checkbox", this);
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $checkbox.change();
    }
});

edited Feb 2, 2011 at 15:36

answered Feb 2, 2011 at 1:54

Matthew Manela

16.8k3 gold badges67 silver badges67 bronze badges

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

2 Comments

sxv Over a year ago

Your theory checks out and your solution works perfectly. Thanks.

dgo Over a year ago

Better to use (at least with some versions of jQuery) $.fn.prop vs $.fn.attr. Attr will assign as well as retrieve. Prop just retrieves.

skeggse · Accepted Answer · 2011-09-11 06:13:33Z

5

Don't bother with the first snippet. Just use LABEL elements:

<label><input type="checkbox">Some option</label>

Now, when the user clicks the label (the text next to the checkbox), the checkbox will be activated.

The second snippet can be optimized:

$('input:checkbox').change(function() {
    $('#' + this.id).toggle(this.checked);
});

edited Sep 11, 2011 at 6:13

skeggse

6,36311 gold badges59 silver badges82 bronze badges

answered Feb 2, 2011 at 1:53

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

1 Comment

Victor Over a year ago

the $('.' + this.id) selector wont work. Need to use '#'. And we dont know whats in the div, you are assuming he is using it as a label, it might be something else.

Victor · Accepted Answer · 2011-02-02 01:54:38Z

1

you are using '.' which is for class selectors instead use '#' since you are using the element ID. Like this:

$(document).ready(function() {
    $(":checkbox").bind('change', function() {
        if($(this).attr("checked")) {
            $('#'+this.id).show();
        }
        else {
            $('#'+this.id).hide();
        }
    });
});

answered Feb 2, 2011 at 1:54

Victor

4,7311 gold badge29 silver badges31 bronze badges

6 Comments

Reigel Gallarde Over a year ago

the OP did that on purpose.. ;) he's not hiding/showing the checkboxes but the <div> with a class equivalent to the id of the checkbox.

Šime Vidas Over a year ago

@Victor That wouldn't make sense, since the check-box is the element that got that ID.

Victor Over a year ago

@Sime I dont try to make sense of what they are trying to do. If thats the case it was unclear.

Victor Over a year ago

@Reigel Fair enough, but without the markup your guess is just as good as mine. But i guess it makes sense.

Šime Vidas Over a year ago

@Victor So when the visitor checks the check-box it should become visible? But it already was visible, otherwise the visitor couldn't have checked it. That does not make sense.

|

Collectives™ on Stack Overflow

Why isn't my checkbox change event triggered?

3 Answers 3

2 Comments

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related