在复选框单击上创建比较框不起作用

Question

我正在开发网站的添加比较功能，因此在当前页面上有一些结果带有一个名为添加比较的复选框。

因此，当用户单击添加以比较复选框时，选定的结果将附加到一个 compare box div 并继续此过程。

我的问题是，当用户想要取消选中或从compare div box 中删除所选结果时，他应该能够将其删除。

这是我迄今为止完成的代码
html

    <div id='compare_box'>
    <form action="compare_results.php" method="POST">
      <div id='result'>

      </div>
      <button id="compare_submit" type="submit" class="btn btn-primary btn-sm">compare</button>
      </form>
        </div>

     <div class="col-md-3 photo-grid " style="float:left"> 

        <div class="well well-sm">

        <h4><small><?php echo $title; ?></small></h4>

     <br>
     <div class="features">
          <div id="compare_feature">
     <input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>">add to compare
          </div>

    <button  class='btn btn-sm btn-info favourite_feature'  value="<?php echo $id;?>">add to favourite</button>

     </div>

    </div>
</div>

css

 #compare_box
{
  display: none;
}

ajax 调用

        $(".compare").change(function() {
if(this.checked) {  
  $('#compare_box').show();
var check = $(this).val();      
    $.ajax({
        type: 'POST',
        url: 'compare.php',
        dataType : "JSON",
        data:{value : check},
        success: function(data)
        {
            console.log(data);   
        console.log(data.id);
       var output = "<div class='col-md-3 photo-grid' style='float:left'>";
       output += "<div id='course_title' class='well well-sm'>";
       output += "<h4>"+data.title+"</h4>";
       output+="<textarea class='hidden' id='hidden_title' name='course_title[]' value=>"+data.title+"</textarea>";
        output+="</div>";
        output+="<input type='hidden' id='hidden_id' name='course_id[]' value="+data.id+">";
       output+="</div>";
            $('#result').append(output); 
        }
    });
  }

 }); 

PS：I'm trying to implement something like this

Answer 1

什么是“#compare_box”？它是复选框消失时出现的元素（在您的示例中，“您的选择”）？

然后在“#result”上绑定一个动作——精确的东西可以将你的元素链接到复选框，比如一个 id（当你在 ajax 响应中准备你的 html 时）。

$('#result').on('click', function() {
   $($(this).data('id')).prop('checked', false); // uncheck it
   $(this).remove(); 
});

当您取消选中一个复选框时执行相同操作（找到具有您的复选框的 data-id 的元素并将其删除）

编辑：它不是使它工作的完美代码，您可能会根据绑定单击或放置数据 ID 的位置进行调整