如何合并多个功能相同的Checkbox关联SVG显示函数？

我正在开发一款应用，拥有约12个checkbox，当用户勾选特定checkbox时，其旁对应的svg会显示。示例代码如下：

<input type="checkbox" id="stdyCoord" name="resPos1" value="2" class="optnsArea2">

<label for="stdyCoord">
  <object data='images/icons/White_SVG/checkmark2-svg.svg'
         class='img-responsive titleSVG' 
         type="image/svg+xml" 
         style='display: none' id='svgStdyCoord'>
  </object>
  Study Coordinator
</label>

当前通过以下JS函数实现功能：

$('#stdyCoord').click(function (event) {
    $('#svgStdyCoord').toggle();
});   

是否有办法避免为每个checkbox编写12个相同的函数？我尝试过if/else语句但未能成功。

解决方案 #

方案1：通用JavaScript处理（适配现有结构） #

不用给每个checkbox单独写函数，利用你现有的ID命名规律（checkbox ID是stdyCoord，对应SVG ID是svgStdyCoord），写一个通用事件监听即可：

// 给所有带.optnsArea2类的checkbox绑定点击事件
$('.optnsArea2').click(function() {
    // 从当前checkbox的ID推导对应SVG的ID
    const svgId = 'svg' + $(this).attr('id');
    // 切换SVG的显示状态
    $('#' + svgId).toggle();
});

只要所有checkbox和对应SVG的ID都遵循svg[checkboxId]的命名规则，不管有多少个，这段代码都能自动处理，不用重复写函数。

方案2：纯CSS实现（更高效，无需JS） #

如果不需要复杂交互逻辑，纯CSS就能搞定，完全不用写JavaScript，代码更简洁：

先调整HTML，去掉SVG的style='display: none'：

<input type="checkbox" id="stdyCoord" name="resPos1" value="2" class="optnsArea2">

<label for="stdyCoord">
  <object data='images/icons/White_SVG/checkmark2-svg.svg'
         class='img-responsive titleSVG' 
         type="image/svg+xml"
         id='svgStdyCoord'>
  </object>
  Study Coordinator
</label>

然后添加CSS：

/* 初始状态隐藏所有SVG */
.titleSVG {
    display: none;
}

/* 当checkbox被勾选时，显示对应label里的SVG */
.optnsArea2:checked + label .titleSVG {
    display: block; /* 可根据布局需求改为inline-block */
}

这个方案利用CSS的:checked伪类和兄弟选择器+，自动关联checkbox和对应的SVG，性能更好，也不用维护ID关联关系。

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