我用html，php和ajax来切换我的网站。但是，只有最上面的开关才起作用。我之所以使用php是为了显示数据库中的结果，而ajax是为了在不重新加载网站的情况下切换开关。提前感谢并评论任何问题！
照片：我有三排在db里。数据检索良好。顶部按钮工作！
ps：为了简单起见，删除了所有类
关于main.php和recipe.inc.php。它们是分开的，因为recipe.inc.php用于许多文档中。
主要.php

<?php
   $conn = mysqli_connect(localhost,****,****,loginsystem);
   //DB connection
   $query="SELECT * FROM `recipe` WHERE creator='$uid'";
   //SQL Query
   $results = mysqli_query($conn,$query);
   $array = array();
   //Array to save key column of the result in order
     while ($row = mysqli_fetch_assoc($results)) {
       for ($i = 0; $i < count($row[recipe_ID]); $i++) {
         $array[$i] = $row[recipe_ID];
         echo '<input type="hidden" id="recipe_ID" name="recipe_ID" value="';
         echo $array[$i];
         echo '">';
    //might confuse you. this is just to hand over recipe_ID to recipe.inc.php
         echo  '<li>';
         echo  '<label>';
           if($row[status]==1){
            echo  '<input type="checkbox" id="checkStatus" name="checkStatus" checked="">';
    //In case where row[status] is equal to 1. means it's ON
                    }else{
            echo  '<input type="checkbox" id="checkStatus" name="checkStatus">';
    //OFF otherwise
                    }
         echo  '<span class="switcher-indicator"></span>';
         echo  '</label>';
         echo  '</li>';
         }
     } 
   ?>

配方公司

<?php            
    if(isset($_POST['checkStatus'])){
    $recipe_ID = $_POST['recipe_ID']);

    if($_POST['checkStatus']=='ON'){
    $status = 1; //to save in DB as boolean. if ON->1
    }else if($_POST['checkStatus']=='OFF'){
    $status = 0; //if OFF->0
    }

  $sql = "UPDATE `recipe` SET `status`=$status WHERE creator=$uid AND recipe_ID=$recipe_ID";
    //nev
  mysqli_query($conn,$sql);
    }
    ?>

ajax部分保存在另一个js文件中。配方.js

$(document).ready(function() {
     $('#checkStatus').on('click', function() {
        var checkStatus = this.checked ? 'ON' : 'OFF';
        var recipe_ID = $("#recipe_ID").val();
        $.post("loginsystem/includes/recipe.inc.php", {
          "checkStatus": checkStatus,
          "recipe_ID": recipe_ID
        },
        function(data) {
            $('#checkStatus').html(data);
        });
     });
});