取消选中复选框时,AJAX无法正常工作

时间:2016-07-22 03:26:07

标签: javascript php jquery ajax checkbox

每次检查或取消选中复选框时,我都会尝试更改db上的标志值。但出于某种原因,只有当我从checked更改我的复选框时才会触发ajax - > 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>

这是我的AJAX代码:

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

?>

3 个答案:

答案 0 :(得分:2)

您必须更改以下代码。

<强> HTML

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

AJAX代码

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();
?>

答案 1 :(得分:1)

您需要更改以下行

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

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

并将此复选框更改为

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

并按此更改您的脚本

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

我认为它会做你需要做的事情

答案 2 :(得分:1)

您可以使用以下代码检查复选框的状态:是选中还是取消选中:

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

快乐编码:)