Why isn't my checkbox change event triggered?

javascript jquery html checkbox click

38,287

Solution 1

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

Solution 2

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

Solution 3

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

38,287

Author by

sxv

Updated on August 17, 2022

Comments

sxv almost 2 years

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>

Reigel Gallarde over 13 years

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.
Victor over 13 years

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.
Šime Vidas over 13 years

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

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

@Reigel Fair enough, but without the markup your guess is just as good as mine. But i guess it makes sense.
Šime Vidas over 13 years

@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.
Victor over 13 years

@Sime I agree it doesnt make sense. I have seen weirder things. I guess we'll just have to wait for the OP to see what he is trying to do.
sxv over 13 years

Your theory checks out and your solution works perfectly. Thanks.
dgo about 9 years

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.