在复选框上创建比较框单击不起作用 [英] create compare box on checkbox click not working

问题描述

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

I'm working on add to compare feature of a website,so on current page there are some results which have a checkbox named add to compare attached.

因此，当用户单击添加以比较"复选框时，所选结果将附加到一个compare box div上，然后继续此过程.

So when user click on add to compare checkbox the selected result get appended to one compare box div and this process go on.

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

my problem is,when user want to uncheck or remove the selected result from compare div box he should be able to remove it.

这是我到目前为止完成的代码
html

Here's is my code which i have done till yet
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:我正在尝试实施类似的方法

推荐答案

什么是"#compare_box"?是复选框消失时出现的元素(例如，在您的选择"中)?

What is '#compare_box' ? Is it the element that appears when the checkbox disappear (in your exemple at 'your selection')?

然后在'#result'上绑定一个动作-精确地将东西链接到ID等复选框(当您在Ajax响应中准备html时).

Then bind an action on '#result' - precise something that can link your element to check box like an id (when you prepare your html in ajax response).

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

对于取消选中复选框的操作相同(使用复选框的data-id查找元素并将其删除)

Do the same for when you uncheck a checkbox (find the element with data-id of your check box and remove it)

这不是使其正常工作的完美代码，您可能会根据绑定点击或放置数据ID的位置进行调整

EDIT : it's not the perfect code to make it work, you might adapt depending on where you bind click or place the data-id

这篇关于在复选框上创建比较框单击不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！