Question

我正在使用CSS切换按钮来显示active或inactive。它使用HTML复选框并修改其CSS看起来像切换滑动条。我已在复选框上绑定onClick事件，以便在选中该复选框时，它会通过AJAX请求将id发送到URL，该URL将给定ID的行的状态更新为{{1} }和回声active。 URL返回的PHP回显现在显示在切换按钮下方。

这里，当单击复选框时，首先选中复选框并将AJAX请求发送到URL，我想要的是当单击复选框时，复选框未被选中或未选中但是发送了AJAX请求，何时发送响应到达然后仅根据响应将复选框的状态更改为已选中或未选中。我怎样才能做到这一点？有人可以通过一个例子来澄清吗？ ajax处理程序代码是：

active

html是：

function toggleStatus(id)
  {
    $.ajax
        ({ 
            url: "project/news/toggleStatus?id="+id,
            type: 'get',
            success: function(result)
            {

                $('#status_txt'+id).html(result);
                $('#status_txt'+id).attr('class', 'status_'+result);

            },
            error: function()
            {
               $('#modalinfo div').html(' <div class="modal-content"><div class="modal-header"><h2>Could not complete the request.</h2></div></div>');
                $('#modalinfo').modal('show'); 
            }
        });
  }

Answer 1

使用java脚本：假设checkbox id =“ck”

count

Answer 2

首先，我建议从复选框HTML中删除onclick属性;它们已经过时，丑陋，不利于分离问题。你正在为你的AJAX使用jQuery，所以你也可以用它来连接你的事件。

其次，您可以阻止复选框的默认行为，以便在单击元素时停止显示检查。然后，您可以在AJAX请求的checked回调中手动设置success属性，如下所示：

<input type="checkbox" name="foo" id="foo" value="foo" />

$(function() {
    $('#foo').change(function(e) {
        e.preventDefault();
        var checkbox = this;
        var id = checkbox.id;

        $.ajax({
            url: "project/news/toggleStatus?id="+id,
            type: 'get',
            success: function(result) {
                checkbox.checked = true;
                $('#status_txt' + id).html(result).attr('class', 'status_' + result);
            },
            error: function() {
                $('#modalinfo div').html('<div class="modal-content"><div class="modal-header"><h2>Could not complete the request.</h2></div></div>');
                $('#modalinfo').modal('show'); 
            }
        });
    });
});

虽然这种行为是非标准的，但是没有价值。我的意思是，用户将单击该复选框，在请求完成之前，似乎没有任何事情发生。这可能会使您的用户再次单击该复选框，并导致重复的AJAX请求。我建议您在单击复选框时向页面添加加载指示符，以便根据用户的操作显然正在完成工作。

另外，我强烈建议您使用DOM遍历从单击的复选框中查找相关的#status_txtXXXX元素而不是丑陋的连接ID - 它在语义上更好，并且意味着JS与UI的耦合更少。

使用ajax控制复选框操作

2 个答案: