动态显示复选框

Question

我正在创建一个订阅/取消订阅复选框，注册时用户将默认订阅。 如果用户取消选中(取消订阅(复选框，它将要求在 jQuery 函数中确认confirm()如果返回 true，ajax 请求将更新数据库中的值，并切换复选框以在下次单击时运行subscribe函数(无需重新加载页面(。

我的尝试

.PHP

<?php if($newsletter_value){ ?>
<input id="checkbox" type="checkbox" name="checkbox" value="<?php echo $newsletter_value; ?>" onclick="unsubscribe();" checked>
<span class="label-text"></span>
<? } else{ ?>
<input id="checkbox" type="checkbox" name="checkbox" value="<?php echo $newsletter_value; ?>" onclick="update_newsletter(1);">
<span class="label-text"></span>
<? } ?>

JavaScript

function unsubscribe(){
var c = confirm("Are you sure?");
if(c){
update_newsletter(0);
}else{ $('#checkbox').prop('checked',true)}
}
function update_newsletter(newsletter){
url = '/updateNewsletter&newsletter='+newsletter ;
$.ajax({
type: 'get',
url: url,
dataType: 'html',
success: function() { 
$('#success').append("<div class='alert alert-success'><i class='fa fa-check-circle'></i> You have successfully modified your subscription <button type='button' class='close' data-dismiss='alert'>&times;</button></div>");
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "rn" + xhr.statusText + "rn" + xhr.responseText);
}
});
}

问题

在第一次页面加载时，页面从控制器获取newsletter_value并显示相应的复选框，但是一旦用户单击它并同时再次单击，相同的功能将与第一次单击时相同(没有切换功能(。

希望你能理解。 并感谢您的帮助。

Answer 1

我认为问题是你从不交换复选框的onclick功能。 因为正如您所说，页面没有重新加载。这意味着 PHP 代码不会执行，函数保持不变(因为 PHP 是在服务器端执行的(。

这再次意味着您必须在 AJAX 请求的success回调函数中交换onclick函数。

JavaScript

// ...
$.ajax({
// ...
success: function() { 
$('#success').append("<div class='alert alert-success'><i class='fa fa-check-circle'></i> You have successfully modified your subscription <button type='button' class='close' data-dismiss='alert'>&times;</button></div>");
$('#checkbox').attr("onclick","update_newsletter(1);");
},
// ...
});

更改onclick功能的方法来自这篇文章。