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

【问题标题】：Reset the data after unchecking the checkbox取消选中复选框后重置数据
【发布时间】：2016-11-10 17:58:15
【问题描述】：

我在 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);

        }
    });
}

 });
});

【问题讨论】：

标签： javascript jquery ajax checkbox

【解决方案1】：

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

     $('#compare_box').empty()

【讨论】：

如果我取消选中复选框，你不认为它会清空整个 div，如果我取消选中，我只需要删除当前选定的结果，我需要类似 toggle() 函数，但不要知道我应该在哪里使用它

【解决方案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

【讨论】：

如何将其与 ajax 调用结果的数据集成
我认为我们应该在将 json 数据分配给它之前声明 box[check] 数组