使用ajax控制复选框操作

I am using CSS toggle button to show active or inactive. It uses a HTML checkbox and modifies its CSS to look like toggle slide bar. I have bound the onClick event on the checkbox so that when the checkbox is checked it sends id via an AJAX request to a URL that updates the status of the row with the given id to active and echoes active. The PHP echo returned by URL is now displayed below the toggle button.

Here, when checkbox is clicked first the checkbox is checked and the AJAX request is sent to the URL, what I want is when the checkbox is clicked the checkbox doesn't get checked or unchecked but the AJAX request is sent and when response arrives then only change status of checkbox to checked or unchecked as per the response. How can I achieve this? Can someone clarify with an example? The ajax handler code is:

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

The html is:

<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>

use java script: suppose checkbox 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;
}

Firstly I would suggest removing the onclick attribute from your checkboxes HTML; they're outdated, ugly and bad for separation of concerns. You're using jQuery for your AJAX, so you may as well use it to hook up your events too.

Secondly, You can prevent the default behaviour of the checkbox to stop the check appearing when the element is clicked. You can then set the checked property manually in the success callback of the AJAX request, something like this:

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

It is worth nothing though is that this behaviour is non-standard. By that I mean that the user will click the checkbox and it will appear that nothing has happened until the request completes. This may confuse your user in to clicking the checkbox again, and causing repeated AJAX requests. I would suggest you add a loading indicator to the page when the checkbox is clicked so that it's obvious that work is being done based on the users' actions.

Also, I would strongly suggest you use DOM traversal to find the related #status_txtXXXX elements from the clicked checkbox instead of ugly concatenated ids - it's better semantically and means the JS is less coupled to the UI.