Checking the checked status of a checkbox upon its click

Question

I am trying to test the status of a checkbox upon its click.

My problem is that it always reports as true as it reports the status after the change event has taken place and not before.

Is there anyway I can test before the change.

Current code using jQuery - the checkboxes all of class 'package':

$(".package").click(function(){
    if($(this).is(":checked")){
        alert($(this).attr("checked"));
    }
});

This always returns true even if selecting a checkbox that is not currently checked.

EDIT : Ok seems there was some old js interfering with the process, after cleaning that up the click function did indeed work. Thanks all.

You can use the change event instead: $(".package").change(function() { // value has changed }); — huysentruitw
– huysentruitw, Commented Apr 4, 2012 at 11:34
Unfortunately the change event causes the same issues (in FF atleast, atm i've not expanded the testing) — mr12086
– mr12086, Commented Apr 4, 2012 at 11:40
Hiya, try this: stackoverflow.com/questions/4817735/… cheers! — Tats_innit
– Tats_innit, Commented Apr 4, 2012 at 11:43
Is there a way to see the affected fragment of the actual HTML? — keystorm
– keystorm, Commented Apr 4, 2012 at 12:45

Community · Accepted Answer · 2017-05-23 12:04:30Z

2

Using the onchange event on a checkbox is not cross-browser (hello IE! And yes, even with jQuery).

The following works:

$('.package').click(function() {
    console.log(this.checked) // There is no need for jQuery here
})

Logs 'true' when you check the checkbox, and 'false' when you uncheck it.

And seriously, using $(this).attr('checked') or $(this).is(':checked') is just jQueryception for nothing.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Apr 4, 2012 at 11:46

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

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

2 Comments

mr12086 Over a year ago

Unfortunately still reports true for everything

Florian Margaine Over a year ago

I'd like to have more information about your environment then :)

huysentruitw · Accepted Answer · 2012-04-04 11:41:37Z

1

You can use the change event instead, this way you are sure the previous checked state is always the oposite of what you read now

$(".package").change(function() {
    alert($(this).attr("checked"));
});

answered Apr 4, 2012 at 11:41

huysentruitw

28.2k10 gold badges95 silver badges141 bronze badges

1 Comment

mr12086 Over a year ago

Unfortunately still reports true for everything

Mathew Thompson · Accepted Answer · 2012-04-04 12:29:56Z

1

The click event fires before the actual textbox change takes place, you need to subscribe to the change event:

$(".package").change(function(){
    if($(this).is(":checked")){
        alert($(this).attr("checked"));
    }
});

Edit: Try querying the actual Javascript object itself, should work

$(".package").change(function(){
    if(this.checked){
        alert(this.checked);
    }
});

edited Apr 4, 2012 at 12:29

answered Apr 4, 2012 at 11:40

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

2 Comments

mr12086 Over a year ago

Unfortunately still reports true for everything, even when not previously checked

Mathew Thompson Over a year ago

@mr12086 check my edit, that works for me :). If it doesn't work for you, could you please show us your HTML?

Collectives™ on Stack Overflow

Checking the checked status of a checkbox upon its click

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related