如何使用JS对接口返回实时生成的分类项进行多选并获取选中值

• ID重复冲突：循环渲染分类时，每个分类的标题和隐藏域都用了相同的id="Nom"、id="Id_cat"，HTML中id属性必须全局唯一，使用id选择器取值时只会返回第一个匹配的元素，导致始终取到第一个分类的信息
• 事件绑定错误：动态生成的分类元素没有用事件委托绑定点击事件，且之前的点击事件绑定到了父容器#Class2而非单个分类卡片上
• 选中状态逻辑错误：将选中样式加在父容器上，没有给单个被点击的分类卡片加选中标识

第一步：修改AJAX渲染代码，移除重复ID #

把循环生成分类部分的id属性改为class属性，避免ID冲突：

$("#Abrir").click(function() {
    $("#Class2 .box").remove(); // 只移除分类卡片，避免误删其他元素
    $.ajax({
        url: "prueba.php",
        data: {},
        type: "GET",
        dataType: "json",
        success: function(datos) {
            var salida = "";
            $.each(datos, function(i, val) {
                // 把id="Nom"、id="Id_cat"改为class，避免重复
                salida += "<div class='box Ide_Cat box" + val.Id_Categoria + "'>";
                salida += "<img src='" + val.Imagen + "' alt = '" + val.Id_Categoria + "'>";
                salida += "<h2 class='Nom'>" + val.Nombre + "</h2>";
                salida += "<input type='hidden' class='Id_cat' value='" + val.Id_Categoria + "'>";
                salida += "</div>";
            });
            $("#Class2").append(salida);
        },
        error: function(jqXHR, status, error) {
            console.log("请求失败: " + error, jqXHR, status);
        }
    });
});

第二步：添加选中状态样式（可选，提升交互体验） #

/* 选中的分类卡片样式，可自定义 */
.box.selected {
    border: 3px solid #2d8cf0;
    background-color: #e8f4ff;
    cursor: pointer;
}
.box {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    border-radius: 8px;
    transition: all 0.2s;
}

第三步：实现多选点击逻辑 #

使用事件委托绑定点击事件，点击分类直接切换选中状态，无需按辅助键：

// 事件委托绑定在固定存在的父容器#Class2上，适配动态生成的元素
$('#Class2').on('click', '.box', function() {
    $(this).toggleClass('selected');
    // 可选：实时打印当前选中的分类
    const selected = $('.box.selected').map(function() {
        return {
            id: $(this).find('.Id_cat').val(),
            name: $(this).find('.Nom').text()
        }
    }).get();
    console.log('当前选中：', selected);
});

第四步：提交校验逻辑 #

点击提交时校验选中数量不少于5个，符合条件再提交数据：

$('#a-submit').click(function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    const selectedList = $('.box.selected').map(function() {
        return {
            Id_cat: $(this).find('.Id_cat').val(),
            Nombre: $(this).find('.Nom').text()
        }
    }).get();

    // 校验选中数量
    if(selectedList.length < 5) {
        alert('请至少选择5个分类');
        return false;
    }

    // 校验通过，后续提交逻辑
    console.log('最终选中的分类：', selectedList);
    // 这里写你提交数据的逻辑，比如ajax提交到后端
});

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