jQuery：在选中或取消选中复选框时无法显示加载相应页面

Question

I have a check box. I want to call two different php pages based on the checkbox checked and uncheck status.

But the below code is only calling the checked php pages. What could be the reason?

     <script type="text/javascript">
     $(function()
     {
     $('input[id^="test"]').on('click',function()
       {
         if ($('input[id^="test"]').checked)//when users click to on checkbox to check
         {

           $.ajax({
               url: "updatestatus.php?id="+$(this).val()+"&status=1",
               success: function(data){ 
                alert('Successfully updated...');
               }
             });
     } 
     else//when users uncheck the checkbox
       {    $.ajax({
               url: "updatestatus.php?id="+$(this).val()+"&status=2",
               success: function(data){
                 alert("uncheckde...");
               }
             });
        } 
        });
    });
         </script>

And in page

<?php //checkbox in a while loop

            echo " <input type='checkbox' id='test' value='".$row['id']."'/> ";
         ?>

Answer 1

It's your check for checked or not that isn't working. Use the .is(':checked') method instead.

$(document).ready(function() {
    $('input[name=cbx]').change(function() {
        if ($(this).is(':checked')) {
            alert('Checked');
        } else {
            alert('Not Checked');
        }
    });
});

Answer 2

As requested:

Try using $('input[id^="test"]').is(':checked') as the conditional. You can also use $(this) to reference the specific checkbox that triggered the event. So, here's your code cleaned up a bit:

<script>
    $(function() {
        $('input[id^="test"]').on('click',function(e) {
            if ($(this).is(':checked') {
                $.ajax({
                    url: "updatestatus.php?id="+$(this).val()+"&status=1",
                    success: function(data){ 
                        alert('Successfully updated...');
                    }
                });
            } 
            else {    
                $.ajax({
                    url: "updatestatus.php?id="+$(this).val()+"&status=2",
                    success: function(data){
                        alert("uncheckde...");
                    }
                });
            } 
        });
    });
</script>

One other change I would make would be to assign a class to your checkboxes, and target that instead of using the "starts with" selector (since not every browser supports it).

Answer 3

Try like this

$(function()
     {
     $('input[id^="test"]').on('click',function()
       {
         if ($(this).attr("checked") == "checked")//when users click to on checkbox to check
         {

           $.ajax({
               url: "updatestatus.php?id="+$(this).val()+"&status=1",
               success: function(data){ 
                alert('Successfully updated...');
               }
             });
     } 
     else//when users uncheck the checkbox
       {    $.ajax({
               url: "updatestatus.php?id="+$(this).val()+"&status=2",
               success: function(data){
                 alert("uncheckde...");
               }
             });
        } 
        });
    });