使用ajax控制复选框操作

control checkbox action with ajax

本文关键字：操作 复选框 控制 ajax 使用      更新时间：2023-09-26

我正在使用CSS切换按钮来显示active或inactive。它使用一个HTML复选框，并修改其CSS，使其看起来像切换滑动条。我已经在复选框上绑定了onClick事件，这样当复选框被选中时，它会通过AJAX请求将id发送到一个URL，该URL将具有给定id的行的状态更新为active并返回active。URL返回的PHP echo现在显示在切换按钮下面。

这里，当首先单击复选框时，复选框被选中，AJAX请求被发送到URL，我想要的是，当单击复选框后，复选框不会被选中或取消选中，但AJAX请求会被发送，当响应到达时，只会根据响应将复选框的状态更改为已选中或未选中。我怎样才能做到这一点？有人能举例说明吗？ajax处理程序代码为：

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'); 
            }
        });
  }

html是：

<td class="numeric"><label class="switch">
                                                                @if($data->status=="active")
                                                                <input class="switch-input" type="checkbox" onClick="javascript:toggleStatus({{$data->id}})" checked="checked"/>
                                                                @else
                                                                <input class="switch-input" type="checkbox" onClick="javascript:toggleStatus({{$data->id}})"/>
                                                                @endif
                                                                <span class="switch-label" data-on="On" data-off="Off"></span> 
                                                                <span class="switch-handle"></span> 
                                                            </label>
                                                            <span id="status_txt{{$data->id}}" class="status_{{$data->status}}">@if($data->status=="inactive")<p style="color:red;">{{ ucfirst($data->status) }}</p>@else{{ ucfirst($data->status) }}@endif</p></span>
                                        </td>

使用java脚本：假设复选框id="ck"

<input type="checkbox" id="ck" onClick="if(ck==1)unChecked();else doChecked();">

ck=0; //init checkbox is unchecked
function doChecked(){    
document.getElementById("ck").checked="checked";
document.getElementById("ck").checked=true;
ck=1;
}
function unChecked(){    
document.getElementById("ck").checked="";
document.getElementById("ck").checked=false;
ck=0;
}

首先，我建议从复选框HTML中删除onclick属性；它们过时了，丑陋不堪，不利于分离关注点。您将jQuery用于AJAX，因此您也可以使用它来连接您的事件。

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

<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的耦合更少。

相关文章：