jQuery技术需求：针对选中复选框的唯一name属性仅执行单次Ajax请求

我来帮你搞定这个问题！你的核心需求很明确——对选中的复选框，每个唯一的name只发起一次AJAX请求，而不是每个复选框都发一次对吧？

原代码的问题 #

你当前的代码会遍历每一个选中的复选框，不管它们的name是否重复，所以像例子里4个同名的复选框就会触发4次请求，这显然不符合你的需求。

解决方案思路 #

我们需要先把选中复选框的name去重，得到一个唯一name的集合，然后只遍历这个集合发起请求。具体步骤：

1. 收集所有选中复选框的name，用Set自动去重（因为Set不允许重复值）
2. 遍历去重后的name列表，每个name只发起一次AJAX请求
3. 按需处理该name对应的复选框值（可以取第一个选中值，也可以收集所有选中值）

修改后的代码 #

基础版（保留同步请求逻辑）

// 第一步：收集所有选中复选框的唯一name
var uniqueNames = new Set();
$("input:checkbox:checked").each(function() {
    uniqueNames.add($(this).attr('name'));
});

// 转换为数组方便遍历
var nameArray = Array.from(uniqueNames);
var i = 0;

function doLoop() {
    if (i >= nameArray.length) {
        return;
    }
    var currentName = nameArray[i];
    // 取该name下第一个选中的复选框的值
    var val = $("input:checkbox:checked[name='" + currentName + "']").first().val();
    
    // 如果需要发送该name下所有选中的值，替换成下面的代码：
    // var vals = $("input:checkbox:checked[name='" + currentName + "']")
    //             .map(function() { return $(this).val(); })
    //             .get(); // 转换为普通数组

    $.ajax({
        async: false,
        url: "import.php",
        method: "POST",
        data: { id: currentName, val: val },
        // 若发送多个值，data改为：{ id: currentName, vals: vals }
        success: function(data) {
            // 这里执行你的后续操作
            i++;
            doLoop();
        }
    });
}

// 启动循环
doLoop();

优化版（异步请求，避免浏览器阻塞）

async: false会让浏览器在请求期间卡住，用户体验较差。如果业务允许异步执行，推荐用Promise来处理：

// 收集唯一name
var uniqueNames = new Set();
$("input:checkbox:checked").each(function() {
    uniqueNames.add($(this).attr('name'));
});

// 封装单个name的请求为Promise
function processSingleName(name) {
    var val = $("input:checkbox:checked[name='" + name + "']").first().val();
    return new Promise(function(resolve) {
        $.ajax({
            url: "import.php",
            method: "POST",
            data: { id: name, val: val },
            success: function(data) {
                // 执行你的操作
                resolve();
            }
        });
    });
}

// 依次执行异步请求
var nameArray = Array.from(uniqueNames);
(function loop(index) {
    if (index >= nameArray.length) return;
    processSingleName(nameArray[index]).then(function() {
        loop(index + 1);
    });
})(0);

代码说明 #

• 去重逻辑：Set是ES6的特性，能自动过滤重复的name值，确保每个name只处理一次
• 值的处理：如果只需要该name下任意一个选中值，用first().val()；如果需要所有选中值，用map收集成数组后发送给后端
• 异步优化：Promise版本不会阻塞浏览器，用户可以在请求期间正常操作页面

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