Question

Any idea why this code keeps saying on and doesn’t work how expected ?

$('#myCheckbox').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        alert("on");
    } else {
        alert("off");
    }
});

example here

http://jsfiddle.net/BFf5H/

Answer 1

1) Use prop added to jQuery 1.6 (I guess)

$('#myCheckbox').click(function() {
    if ( $(this).prop('checked')) {
        alert("on");
    } else {
        alert("off");
    }
});

2)Use is to check the state

Try this:

$('#myCheckbox').click(function() {
        if ( $(this).is(':checked')) {
            alert("on");
        } else {
            alert("off");
        }
    });

Working example: http://jsfiddle.net/BFf5H/2/

3) @Felix’s suggestion
Try this:

$('#myCheckbox').click(function() {
        if ( this.checked) {
            alert("on");
        } else {
            alert("off");
        }
    });

EDIT:

As per the URL provided by OP alternate solution:

$(".styled").change(function(){
  if(this.checked){
   alert("On");
  } else {
   alert("Off");
  }
})