从数据库中检索值，选择或取消选中JQuery复选框

Question

我的jQuery中存在问题。我想使用AJAX从数据库中检索数据。如何选择并将这些值传递给php文件并获取多个值。

例如 - 当我选中复选框时，ajax将返回所选复选框的值。如果我取消选中相同的复选框，则该值将删除。

这里的复选框是：

checkboxes.php

<a class="openmodal">
   <img class="case" src="aqua.jpg">
   <h4>Aqua</h4>        
</a>

这里是jQuery：

<div class="block1">
  <label><input type="checkbox" name="checkbox[]" id="extra" value="deep cleaning"/>Deep Cleaning</label>
  <label><input type="checkbox" name="checkbox[]" id="extra" value="dishes"/>Dishes</label>
  <label><input type="checkbox" name="checkbox[]" id="extra" value="move in/out"/>Move in/out</label>
</div>
<div class="block1">
  <label><input type="checkbox" name="checkbox[]" id="extra" value="inside cabinets"/>Inside Cabinets</label>
<label><input type="checkbox" name="checkbox[]" id="extra" value="inside fridge" />Inside Fridge</label>
<label><input type="checkbox" name="checkbox[]" id="extra" value="inside oven" />Inside Oven</label>
</div>
<div class="block1">
  <label><input type="checkbox" name="checkbox[]" id="extra" value="interior windows" />Interior windows</label>
  <label><input type="checkbox" name="checkbox[]" id="extra" value="laundry + folding" />Laundry + Folding</label>
  <label><input type="checkbox" name="checkbox[]" id="extra" value="green cleaning" />Green Cleaning</label>
  </div>
  <div class="block1">
    <label><input type="checkbox" name="checkbox[]" id="extra" value="organization" />Organization</label>
    <label><input type="checkbox" name="checkbox[]" id="extra" value="wipe window blinds" />Wipe Window Blinds</label>
  </div>
  </div>
  <span id="cost"></span>
</div>

这里是php代码 -

$(document).ready(function() {
  var check=[];
  $('input[type=checkbox]').on('change', function() {
    var check=$(this).val();
    console.log($(this).val());
    $.ajax({
      type:'POST',
      data:{ "extra" : check},
      dataType : "JSON",
      url : "login.php",
      success:function(response){
        if(response){
          totalCost=10+response;
          $('#cost').text(totalCost);
        }
      }
    });
  });
});

数据库图片 -

我想检查倍数并通过ajax接收多个值，当我取消选中复选框时，该值将从跨度总计中删除。如果有任何错误，那么对不起。我是一个更大的人。我希望你们都能支持我，提前做好thnku。

Answer 1

<强> HTML

<label>Total amount : </label>
<span id="totalCost">0</span>

<强> JS

$(document).ready(function () {
      var check = []; 
      $('input[type=checkbox]').on('change', function () {
         var checked = 0; // assigning ZERO for unchecked
         if ($(this).prop('checked') == true) { // checking checkbox status
            checked = 1; // ONE for checked
         }
         var totalCost = $("#totalCost").text(); // getting previous totalcost
         var check = $(this).val();
         // two parameters
         // data json object 
         // callback function
         getData({"extra": check}, function (response) {  
            var content = '';
            if (response) { //response is json object 
               if (checked) { // if checkbox is checked
                  content = '<div id="' + response['id'] + '">' + response['price'] + '</div>';
                  //create another variable which have div with price and id
                  totalCost = parseInt(totalCost) + response['price'];
                  // add new price in previous price
               } else {
                  $('#' + response['id']).remove();
                  // remove price div targeting with id
                  totalCost = parseInt(totalCost) - response['price'];
                  // subtract price from previous price
               }
               $("#cost").prepend(content); // prepend new content
               $("#totalCost").html(totalCost);
            }
         });
      });
      function getData(data, callback) {
         $.ajax({
            type: 'POST',
            data: data,
            dataType: "JSON",
            url: "login.php",
            success: callback
         });
      }
   });

php代码中的更改

if (isset($_POST['extra'])) {
    $query=mysqli_query($con,"select * from extras where name_of_extra ='$_POST[extra]'");
    while ($row = mysqli_fetch_array($query)) {
       echo json_encode($row,JSON_NUMERIC_CHECK);
    }
}