如何获取checkbox的选中状态作为变量传入ajax对象中

问题原因 #

你初始化ajaxObj的时候，options.data.myCheckbox取的是页面刚加载时的静态值，JS的基础类型赋值是值拷贝，后续你修改全局$myCheckbox变量，并不会同步更新ajaxObj.options里存的旧值，所以发请求时永远带的是初始状态。

解决方法 #

不需要额外维护全局变量存checkbox状态，每次发起AJAX请求前动态读取最新的选中状态写入请求参数即可，修改后代码如下：

// 去掉最开始的全局$myCheckbox定义，不需要额外维护这个变量
var ajaxObj = {
    options: {
        url: pfp_catz_ajax_script.ajaxurl,
        data: {
            action: 'pfp_catz_ajax',
            searchText: searchText,
            theFunction: 'getLocations',
            myCheckbox: false // 初始默认值
        },
        dataType: "json",
        type: 'POST'
    },
    delay: 1000,
    errorCount: 0,
    errorThreshold: 5,
    ticker: null,
    post: function(responseData) {
        console.log('myCheckbox='+jQuery("#myCheckbox").prop('checked'));
        if(ajaxObj.errorCount < ajaxObj.errorThreshold) {
            ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay);
        }
    },
    fail: function(jqXHR, textStatus, errorThrown) {
        console.log("This is the error: "+errorThrown);
        ajaxObj.errorCount++;
    }
};

// 修改AJAX请求方法，每次请求前更新参数
function getMarkerData() {
    // 动态获取最新的checkbox状态写入请求参数
    ajaxObj.options.data.myCheckbox = jQuery("#myCheckbox").prop('checked') ? 1 : 0;
    jQuery.ajax(ajaxObj.options)
        .done(setMarkers)
        .fail(ajaxObj.fail)
        .always(ajaxObj.post);
}

setMarkers(locs);
ajaxObj.post();

// 监听事件里不需要再维护全局变量，删掉赋值逻辑即可
jQuery("#legend").on('click', '#myCheckbox',function(){
    if(jQuery(this).is(':checked')) {
        alert('myCheckbox checked');
    } else {
        alert('myCheckbox unchecked');
    }
});

补充说明 #

如果你一定要保留全局$myCheckbox变量的写法，也可以在checkbox的点击事件里，同时更新ajaxObj.options.data.myCheckbox = $myCheckbox，但是直接动态读DOM状态的方案更稳妥，不会出现变量和实际DOM状态不同步的问题。

内容的提问来源于stack exchange，提问作者Eric Kowalewski