체크 상자에 체크 박스를 만들면 작동하지 않음

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

아약스 호출

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

}); 

추신 : I'm trying to implement something like this

Answer 1

'#compare_box'란 무엇입니까? 확인란이 사라지면 나타나는 요소입니까 (예 : '선택')?

'#result'에 액션을 바인딩하십시오. id와 같은 체크 상자에 요소를 연결할 수 있습니다. (아약스 응답으로 HTML을 준비 할 때).

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

당신이 체크 박스 (당신의 체크 박스의 데이터-id를 가진 요소를 찾아 제거)

편집을 취소 할 때 동일한 작업을 수행 : 그것이 작동하도록 완벽한 코드가 아닙니다, 당신은 수도 당신이 클릭하거나 데이터 ID를 배치 할 위치에 따라 적응