如何使用jQuery实现勾选复选框时仅展示最新选中项对应图片

实现方案 #

你只需要调整change事件的处理逻辑，先批量隐藏所有关联图片，再控制当前选中项对应图片的显示即可，同时可以增加取消其他复选框勾选的逻辑，避免多选中状态和显示结果不一致的体验问题。

修改后代码 #

jQuery(document).ready(function( $ ){
  // 所有控制显示的图片如果统一加了公共类 decal-image 就用下面这行，没加的话替换为 $('[id^="decal_"]') 选中所有id以decal_开头的元素
  const $allDecalImages = $('.decal-image');
  const $decalCheckboxes = $('.decalcheckbox input[type=checkbox]');

  $decalCheckboxes.on("change",function() { 
    const currentCheckbox = $(this);
    const checkboxVal = currentCheckbox.val().toLowerCase();
    const checkboxIdSuffix = checkboxVal.replace(/ /g, "_");
    const $targetImg = $('#decal_'+ checkboxIdSuffix);

    if(currentCheckbox.is(':checked')) {
      // 先隐藏所有关联图片
      $allDecalImages.hide();
      // （可选优化）取消其他复选框的勾选，符合单选交互预期，不需要可以删掉下面这行
      $decalCheckboxes.not(currentCheckbox).prop('checked', false);
      // 显示当前选中项对应图片
      $targetImg.show();
    } else {
      // 取消勾选时隐藏对应图片
      $targetImg.hide();
    }
  }).change(); // 初始化触发一次
});

逻辑说明 #

• 提前缓存所有关联图片和复选框的DOM对象，避免重复查询DOM提升性能
• 只有当前复选框被勾选时，才会清空之前的显示状态，展示最新选中的图片
• 可选的取消其他复选框勾选的逻辑，避免出现多个复选框被勾选但仅显示一张图片的认知冲突，不需要直接删除对应行即可
• 取消当前勾选的选项时，对应图片会隐藏，此时无图片展示，如果需要取消时默认展示第一张/默认图，可以在else分支里补充对应逻辑

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