带有复选框的AJAX

Question

I'm new to AJAX and JavaScript, but decided to tackle sending a value based on an HTML "" tag using Ajax to a Python handler. Below is my code, simulated from this site. The problem I'm having is understanding when a box is "checked" vs "unchecked", how does the value get passed, when I have "unchecked" in the input tag? I'm not getting the connection as I want to make sure that whatever the user clicks gets passed through AJAX to my Python Handler.

send_data = function(status) {

        $.ajax({
      url: "/subscription",
            dataType: "json",
            data: {'status' : status},
            type: "POST",
            cache: false

    }).done(function(data, status, xml) {

         var obj = jQuery.parseJSON(data);
         alert(obj.success);

        }).fail(function(jqXHR, textStatus, errorThrown) {


        }).always(function() {


        });

}


$(document).ready(function() {

    $("#subscription").submit(function() {

        var cb = $("input#switch-1");

        if (cb.is("checked")) {
            send_data(cb.val());
        } else {
            send_data(cb.val());
        }
        return false; 
    });

});

<form id="subscription" action="">
    <label  class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
    <input type="checkbox" id="switch-1" name="status" class="mdl-switch__input" id="status" unchecked />
    <span class="mdl-switch__label">USEREMAIL Subscribed</span>
<input type="submit" value="Submit" />

</form>

</div>

Answer 1

First of all, the correct selector is :checked.
Аnd you should pass checkbox value to send_data() function only when it's checked, otherwise your condition is irrelevant - you are doing the same thing for checked and not checked inputs.

So, your code should be something like this:

if (cb.is(":checked")) {
    send_data(cb.val());
} else {
    send_data(null);
}

But if all you need is pass form values to server, you don't need to handle checkbox manually, you can just do this:

var send_data = function(data) {
    $.ajax({
        url: "/subscription",
        dataType: "json",
        data: data,
        type: "POST",
        cache: false
    }).done(function(data, status, xml) {
        var obj = jQuery.parseJSON(data);
        alert(obj.success);
    }).fail(function(jqXHR, textStatus, errorThrown) {

    }).always(function() {

    });
}

$("#subscription").submit(function() {
    send_data($(this).serialize());
});

Note, that if checbox is not checked, it's value won't be sent to server (it's a default browser behaviour). So you can just check presense of status field in your backend script.