从数据库中检索值，选择或取消选中JQuery复选框 [英] Retrieveing the values from database selecting or deselecting the checkboxes JQuery

问题描述

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

There is a problem in my jQuery. I want to retrieve the data from the database using AJAX.How I select and pass to the php file these values and get the multiple values.

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

For Example- when I select the checkbox the ajax will return the value of the selected checkbox. If I unselect the same checkbox then the value will be removed.

此处的复选框为：

checkboxes.php

checkboxes.php

<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>

这里是jQuery：

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

这里的PHP代码 -

here the php code-

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

数据库图像 -

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

I want to check the multiples and recieve multiple values through ajax and when i unselect the checkboxes then the value will remove from the span total. if there is any mistake then i m sorry. i am a bigner. i hope you all will support me do better thnku in advance.

推荐答案

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

这篇关于从数据库中检索值，选择或取消选中JQuery复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！