javascript - 使用ajax控制复选框 Action

Question

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

在这里，当首先单击复选框时，会选中该复选框并将 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>

Answer 1

使用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;
}