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

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