取消选中复选框时AJAX不起作用

Question

I am trying to changed the value of my flag on db everytime I check or unchecked the checkbox. But for some reason, it ajax is only firing when im changing my checkbox from checked -> unchecked .

HTML

    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Lot ID                  </th>
                <th>Lot Name                </th>
                <th>Block Located         </th>
                <th>Status      </th>
                <th>Action      </th>
            </tr>
        </thead>
        <tbody>
    <?php
    $sql = $db->prepare("SELECT * from tbl_lot
                        LEFT JOIN tbl_block ON tbl_lot.blockID = tbl_block.blockID
                        WHERE lotStatus <> 2");

    $sql->execute();
        while($result = $sql->fetch(PDO::FETCH_ASSOC))
        {
          $id         = $result['lotID'];
          $lotName    = $result['lotName'];
          $status     = ($result['lotStatus']==1) ? "checked" : "";
          $blockName  = $result['blockName'];
          $blockID    = $result['blockID'];

          echo "
          <tr>
            <td>$id</td>
            <td>$lotName</td>
            <td>$blockName</td>
            <td>
            <input type='checkbox'  onchange='switchStatus($id,$status)'  data-toggle='toggle' $status>
            </td>
            <td>
            <div class='btn-group'  role='group'>
              <input type='button'  value='Manage'  onclick='Xmanage($id,$blockID,\"$lotName\")'  class='btn btn-info'>
              <input type='button'  value='Remove'  onclick='Xdelete($id)'                            class='btn btn-danger'>
            </div>
            </td>
          </tr>
          ";
        }
        ?>
        <tbody>
</table>

Here's my AJAX Code:

    function switchStatus(id,status){
  var theID = id;
  var theStatus = status;
  if(theStatus==1){
  $.ajax({
      url:    "ajax/updateProjectStatus.php",
      type:   "POST",
      data:   {
        projectID : theID,
        status    : theStatus
      },
      cache:  false,
      success: function (data){
        alert(data);
      }
  });
  }
}

updateProjectStatus.php

 <?php
include "../../connection/connection.php";
$id                  =  $_POST['projectID'];
$prevStats       =  $_POST['status'];
if($prevStats==1){$status = 1;}else{$status=0;}
$sql                 =  "UPDATE tbl_project  set projectStatus = '$status' WHERE projectID = '$id'";
$query             =    $db->prepare($sql);
$results           =    $query->execute();

?>

Answer 1

You have to change Following Code.

HTML

<input type='checkbox' onchange='switchStatus($id, this)' data-toggle='toggle' $status>

AJAX Code

function switchStatus(id,status){
    var theID = id;
    var theStatus = $(status).prop('checked');
    if(theStatus){
       theStatus = 1;
    } else {
       theStatus = 0;
    }
    $.ajax({
       url  : "ajax/updateProjectStatus.php",
       type : "POST",
       data : {
           projectID : theID,
           status    : theStatus
       },
       cache   :  false,
       success : function (data){
          alert(data);
       }
    });
}

updateProjectStatus.php

<?php
include "../../connection/connection.php";
$id = $_POST['projectID'];
$status = $_POST['status'];
$sql = "UPDATE tbl_project  set projectStatus = '$status' WHERE projectID = '$id'";
$query = $db->prepare($sql);
$results = $query->execute();
?>

Answer 2

You need to change following lines

 $status     = ($result['lotStatus']==1) ? "checked" : "";

to

$status     = $result['lotStatus'];
$checked_or_not="";
if($status==1){ $checked_or_not= "checked"; }

And change checkbox as this

 <input type='checkbox' id="check"  onchange='switchStatus($id)'  data-toggle='toggle'  value="$status"  $checked_or_not>

And change your script as this

function switchStatus(id) {
    var theID = id;
    var theStatus = 0;
    if (document.getElementById("check").checked == true) {
        theStatus = 1;
    }
    $.ajax({
        url: "ajax/updateProjectStatus.php",
        type: "POST",
        data: {
            projectID: theID,
            status: theStatus
        },
        cache: false,
        success: function (data) {
            alert(data);
        }
    });
}

I think it will do what you need to do

Answer 3

You can check the status of checkbox whether it is checked or unchecked by using following code :

if($('#'+your_id).is(':checked') || $('#'+your_id).prop('checked')) 
  {
    // do something if checked
  }
  else
  {
    // do something if unchecked
  }

Happy Coding :)