$( elem ).attr("checked") giving opposite results [duplicate]

Question

Clicking checkbox should give alert checked if checked and give alert not checked if not. Here is the code:

<input type = "checkbox" id = "all" value="all" /> MyCheckbox

 <script src="jquery-2.1.4.js"></script>
<script type="text/javascript">
    $("input[type=checkbox]").click(function(){
    if ($(this).attr("checked")) {   
alert("checked");
}
else{
alert("not checked");
}
});
</script>

Initially checkbox is unchecked. As soon as I click it, debugger shows it checked value true. Now control should enter if{} block as its value is true but its entering in else{} block. (Am using breakpoints).

Why this is happening. Pls help am trying for hours.

Answer 1

The problem is that you are checking checked attribute which is not going to be removed or added when checked status changes. This is a nuance you should be aware about properties and attributes. You need to compare checked property of the checkbox element, not attribute.

Also it's better to use change event handler (because you can check checkbox not only with mouse click but with keyboard too).

$("input[type=checkbox]").change(function() {
    if (this.checked) {
        alert("checked");
    }
    else {
        alert("not checked");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "checkbox" id = "all" value="all" /> MyCheckbox

Answer 2

This :

$(this).attr("checked") //in old versions of jquery this yield "checked" , 

Yields undefined which is a Falsy statement.

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set

You can either use :

if ($(this).is(":checked"))

or

$(this).prop("checked")