Question

我在div中有一些结果，每个结果都有一个checkbox与之关联，当用户点击单一复选框用户时，当前复选框的值将使用ajax调用传递到另一个页面并获取数据并且显示在隐藏的div框中。

现在问题是，当用户uncheck checkbox时，它应该删除与该复选框相关联的数据。

我的代码是：

<div id='compare_box'>                  
</div>

<div class="col-md-3 photo-grid " style="float:left">              
  <div class="well well-sm">             
    <a href="final.php?id=<?php echo $id;?>&name=<?php echo $title;?>" target="_blank">
      <h4><small><?php echo $title; ?></small></h4>
    </a>
    <br>
    <input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>">add to compare
  </div>
</div>

调用Ajax

 <script type="text/javascript">
$(document).ready(function()
{


    $(".compare").change(function() {
      if(this.checked) {  
      var check = $(this).val();      
      $.ajax({
        type: 'POST',
        url: 'compare.php',
        dataType : 'JSON',
        data:{value : check},
        success: function(data)
        {
            console.log(data);
            $('#compare_box').append(data);

        }
    });
}

 });
});

Answer 1

使用类似的东西清空DIV的内容

     $('#compare_box').empty()

Answer 2

更好的方法是保留参考地图，就像这样

$(document).ready(function() {
  var boxes = {};
  $(".compare").change(function() {
    var check = $(this).val();
    var data = $(this).closest('.box').clone();

    if (this.checked) {
      boxes[check] = data;
      $('#comparebox').append(boxes[check]);
    } else if (!this.checked && boxes[check]) {
      boxes[check].remove();
      delete boxes[check];
    }
  });
});

编辑 - 应该正常工作（未经过测试）

var check = $(this).val();
if (this.checked) {      
  $.ajax({
    type: 'POST',
    url: 'compare.php',
    dataType: 'JSON',
    data: {
      value: check
    },
    success: function(data) {
      boxes[check] = $(data);
      $('#compare_box').append(boxes[check]);
    }
  });
} else if(!this.checked && boxes[check]) {
    boxes[check].remove();
    delete boxes[check];
}

DEMO

取消选中复选框后重置数据

2 个答案: