Why does this if/else not work in jquery for me?

Question

I have the following that fires off when a checkbox is changed.

$(document).ready(function() {
    $("#reviewed").change(function(){
        if ($('#reviewed:checked').val() !== null) {
            $.ajax({
                url: "cabinet_reviewed.php?reviewed=yes",
                cache: false,
                success: function(html){
                    $("#reviewDate").replaceWith(html);
                }
            });
         } else {
             $.ajax({
                url: "cabinet_reviewed.php?reviewed=no",
                cache: false,
                success: function(html){
                    $("#reviewDate").replaceWith(html);
                }
            });
        }
});
})

This only works once. I'm looking to see when the check box is changed and what the value of it is once changed.

UPDATE: I've change the code around to the following (based on everyone's comments)

$(document).ready(function() {
    $("#reviewed").click(
        function() { 
            var rURL = 'cabinet_reviewed.php?reviewed=';
                if ($("#reviewed").is(":checked"))
                   rURL = rURL + "yes";
                else
                   rURL = rURL + "no";
                alert (rURL);
        $.ajax({
            url: rURL,
            cache: false,
            success: function(html){
                $("#reviewDate").replaceWith(html);
            }
        });

    });

})

The file cabinet_reviewed.php simply echos the value of $_GET['reviewed'] With this updated code the alert shows the correct URL but the second click does not run the .ajax. Do I need to do something so the .ajax is run again?

Answer 1

There are apparently some bugs with the change() event for checkboxes in IE. Try using the click() event instead and see if it works better.

Answer 2

Try with != instead of !==

And also this as an alternative:

$('#reviewed').is(':checked')

The below code works consistently in FF 3.5 and IE8:

$("#reviewed").click(
    function() { 
        if ($("#reviewed").is(":checked"))
            alert('checked'); 
        else
            alert('not checked');
    }
);              

After your update:

This code...

success: function(html){
  $("#reviewDate").replaceWith(html);
}

... is replacing the element with ID=reviewDate in the DOM with the HTML that is returned from the Ajax call, so it is no longer present the second time the Ajax call is made.

Will something simpler like this work for you?

success: function(html){
  $("#reviewDate").html(html);
}

Answer 3

You normally want to use click event to track changes in checkboxes/radiobuttons. The change event is only fired if the new value differs from the old value. In checkboxes/radiobuttons there's no means of an initial value, only the checked attribute which is often not predefinied, hence the need to click twice before the change event is fired.

In checkboxes/radiobuttons you also don't want to check the value by val(), it's always the same. You rather want to check the checked state using this.checked.

Thus, the following should work:

$(document).ready(function() {
    $("#reviewed").click(function() {
        if (this.checked) {
            // ...
        } else {
            // ...
        }
    });
});