使用JavaScript与PHP开发头像选择器，解决选中新头像自动取消旧选中项的问题

问题根因 #

• 原有逻辑是先为当前点击项添加激活类，再仅删除第一个匹配到的激活类，无法彻底清除所有之前的选中状态
• 没有同步关联checkbox的勾选状态，表单提交时会出现选中状态和实际提交值不一致的问题
• 未适配点击已选中头像取消选中的常见交互逻辑

修复后的完整JS代码 #

function changeAvatar() {
  // 获取所有头像相关元素
  const avatarLabels = document.querySelectorAll(".avatar-label");
  const allSelectedIndicators = document.querySelectorAll(".selected-avatar");
  const allAvatarCheckboxes = document.querySelectorAll('input[type="checkbox"][id^="avatar_img_"]');

  avatarLabels.forEach((label, index) => {
    label.addEventListener('click', function(e) {
      // 先清空所有激活状态和checkbox勾选
      allSelectedIndicators.forEach(indicator => indicator.classList.remove('active-avatar'));
      allAvatarCheckboxes.forEach(checkbox => checkbox.checked = false);

      // 自行控制选中逻辑，阻止label默认切换checkbox的行为
      e.preventDefault();
      const currentCheckbox = allAvatarCheckboxes[index];
      const currentIndicator = allSelectedIndicators[index];
      const isNowChecked = !currentCheckbox.checked;
      currentCheckbox.checked = isNowChecked;
      if (isNowChecked) {
        currentIndicator.classList.add('active-avatar');
      }
    })
  })
}
changeAvatar();

可选优化建议 #

如果不需要支持点击已选中头像取消选中的逻辑，仅需要强制单选，可简化点击事件逻辑：

label.addEventListener('click', function(e) {
  e.preventDefault();
  // 清空所有历史选中状态
  allSelectedIndicators.forEach(indicator => indicator.classList.remove('active-avatar'));
  allAvatarCheckboxes.forEach(checkbox => checkbox.checked = false);
  // 仅激活当前点击的头像
  allAvatarCheckboxes[index].checked = true;
  allSelectedIndicators[index].classList.add('active-avatar');
})

另外如果表单提交时只需要传选中的头像值，建议将所有checkbox的name属性统一改为name="selected_avatar"，服务端直接接收selected_avatar参数即可，不需要遍历所有avatar_id对应的参数。

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