这是我从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>
任何帮助表示赞赏。提前谢谢。
答案 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 ...
$('.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;