如何获取checkbox选中项的data-img属性值并在列表中展示对应图片

解决方案 #

方案1：直接读取DOM内置的data-img属性（优先推荐） #

你已经把图片URL存在了checkbox的data-img自定义属性里，完全不需要额外查询数据库，直接在前端读取即可，只需要修改getSelectedItems函数的逻辑即可，同时可以直接渲染成可预览的图片列表：

function getSelectedItems() {
  var checkedImgUrls = [];
  // 过滤掉全选框masterCheck，避免误读
  listCheckItems.filter(":checked:not(#masterCheck)").each(function() {
    // 读取data-img属性值，也可以用$(this).attr('data-img')实现相同效果
    checkedImgUrls.push($(this).data('img'));
  });

  // 渲染为图片列表，可根据需求调整样式
  var imgHtml = '';
  checkedImgUrls.forEach(function(url) {
    imgHtml += `<img src="${url}" style="width: 100px; height: 100px; object-fit: cover; margin-right: 8px; margin-bottom: 8px;" alt="选中的图片">`;
  });
  $("#selected-values").html(imgHtml);

  // 如果只需要输出URL的JSON字符串，替换上面的渲染逻辑即可：
  // $("#selected-values").html(JSON.stringify(checkedImgUrls));
}

方案2：通过ID查询数据库获取URL（仅当业务要求必须走服务端校验时使用） #

如果有安全校验、动态获取最新URL等需求，必须走数据库查询，可以按以下步骤实现：

1. 后端新增接口，接收图片ID数组，查询数据库后返回对应URL数组
2. 修改getSelectedItems函数，收集选中ID后发送AJAX请求获取URL再渲染
   示例代码：

function getSelectedItems() {
  var checkedIds = [];
  listCheckItems.filter(":checked:not(#masterCheck)").each(function() {
    checkedIds.push($(this).val());
  });

  // 发送请求到后端接口
  $.post('/你的接口地址', { ids: checkedIds }, function(res) {
    // 假设接口返回的res.data为URL数组
    var imgHtml = '';
    res.data.forEach(function(url) {
      imgHtml += `<img src="${url}" style="width: 100px; height: 100px; object-fit: cover; margin-right: 8px; margin-bottom: 8px;" alt="选中的图片">`;
    });
    $("#selected-values").html(imgHtml);
  });
}

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