如何追加和删除我们在电子商务中选择的商品的价值

时间:2017-02-20 09:46:18

标签: php jquery ajax

这是我从php服务器解析的HTML代码:

echo '<label class="product-label"><input type="checkbox" value="'.$row['categorie_id'].'" class="productcheck"/> '.$row['categorie'].'</label>';

这是我将发送到服务器的jquery ajax代码:

<script type="text/javascript">
$('.productcheck').click(function() { 
    var val1 = $(this).val();
    $.ajax({
       type: 'POST',
       url: 'product_ajax.php',
       data: { choose: val1},
       beforeSend: function(load){  
          var html = "<img src='images/loading.gif' />";       
          $('#result').append(html);
       },
       success: function(response) {
          $('#result').html(response);
          $('.yearshow').hide();
       }
   });
});

这是发送到服务器端php文件的代码:

echo $_POST['choose'];

我想要实现的是,每当用户点击类别时,响应应该附加在html代码中,而不会丢失先前的值

同时如果用户再次点击已经选中的复选框,那么该值应该从html侧删除。

这是附加结果的地方:

<div class="col-sm-8" id="result"></div>

任何帮助表示赞赏。提前谢谢。

2 个答案:

答案 0 :(得分:0)

抱歉我的英语,我想你想这样做↓

 this.SomeDataService.getName().subscribe((lsName: Project.Models.LsModel[]) => {
            this.lsName.push(lsName);
$(".productcheck").click(function() {
   var val1 =  $(this).val();

   if($(this).prop("checked")) {
     var result_msg = "<span data-value=" + val1 + ">" + "your response code here" + "<br></span>";
     $('#result').append(result_msg);
   } else {
     $('#result').find('[data-value="'+ val1 +'"]').remove();
   }   
});

如果你想这样做,加入你的ajax成功功能很好。

像这样

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="product-label">
<input type="checkbox" value="1" class="productcheck"/>category-1</label>

<label class="product-label">
<input type="checkbox" value="2" class="productcheck"/>category-2</label>
<div class="col-sm-8" id="result"></div>

});

答案 1 :(得分:0)

可能会帮助你..请尝试使用你的代码.... 如果您的复选框未选中,则无需调用Ajax ...

&#13;
&#13;
$('.productcheck').change(function() {
  var val1 = $(this).val();
if($(this).prop('checked'))
{
  //work when Checkbox is Checked
  //you can also put your ajax here
  $("div#result").append("<label id='" + val1 + "'> " + val1 + " </label>");
}else
{
// it work when Checkbox is Unchecked
  $("div#result").find("#"+val1).remove();
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="product-label"><input type="checkbox" value="pen" class="productcheck"/>Pen</label>
<label class="product-label"><input type="checkbox" value="Pencil" class="productcheck"/>Pencil</label>
<label class="product-label"><input type="checkbox" value="Book" class="productcheck"/>Book</label>

<div class="" id="result"></div>
&#13;
&#13;
&#13;