如何实现点击图片获取ID标签拼接为URL参数传递到商家搜索页

下面是精简、可直接复制使用的实现，不需要额外依赖，适配你较弱的JavaScript基础：

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<style>
/* 图片基础样式，可自行调整尺寸、边距 */
.tag-img {
  width: 200px;
  cursor: pointer;
  border: 3px solid transparent;
  margin: 10px;
}
/* 选中状态样式，点击后显示，可自行修改边框颜色、透明度等 */
.tag-img.selected {
  border-color: #2196F3;
  opacity: 0.8;
}
</style>
</head>
<body>
<!-- 可选标签图片，新增选项只需要加同类img标签，id设为对应tag值即可 -->
<img src="http://website.com/image1" class="tag-img" id="TAG1"/>
<br/>
<img src="http://website.com/image2" class="tag-img" id="TAG2"/>
<br/>
<img src="http://website.com/image3" class="tag-img" id="TAG3"/>
<br/>
<img src="http://website.com/image4" class="tag-img" id="TAG4"/>

<form action="https://website.com/search/" method="get">
  <!-- 隐藏输入框，自动存储选中的tag -->
  <input type="hidden" name="_characteristics" id="tagInput">
  <input type="submit" value="View Selected">
</form>

<script>
// 存储选中的标签数组
const selectedTags = [];
const tagInput = document.getElementById('tagInput');
const allTagImgs = document.querySelectorAll('.tag-img');

// 给每个图片绑定点击事件
allTagImgs.forEach(img => {
  img.addEventListener('click', () => {
    const tag = img.id;
    const tagIndex = selectedTags.indexOf(tag);
    if (tagIndex > -1) {
      // 已选中状态，点击后取消选择
      selectedTags.splice(tagIndex, 1);
      img.classList.remove('selected');
    } else {
      // 未选中状态，点击后加入选择
      selectedTags.push(tag);
      img.classList.add('selected');
    }
    // 更新隐藏输入框的值，用逗号拼接选中标签
    tagInput.value = selectedTags.join(',');
  })
})
</script>
</body>
</html>

逻辑说明 #

1. 点击图片时会自动切换选中状态，选中的图片会显示蓝色边框作为提示，样式可通过CSS自由调整
2. 选中的标签ID会实时同步到隐藏的输入框中，表单提交时会自动按照GET请求规则拼接参数
3. 最终跳转的URL格式完全符合需求：website.com/search/?_characteristics=TAG1%2CTAG2，逗号会被自动编码为%2C，不需要额外处理

扩展说明 #

如果需要新增更多选项，只需要按照现有格式新增<img>标签，保持class="tag-img"，id设置为对应的标签值即可，不需要修改JS逻辑。

内容的提问来源于stack exchange，提问作者htv-atx