复选选择器是面向用户提供可枚举选项移动端场景下仅适配少量选项、支持用户完成多项选择的交互组件。其功能定位与分类逻辑和单选选择器高度相似核心差异在于允许用户单次选取多个符合需求的选项。1️⃣动图效果复选选择器与单选选择器的特性高度重合核心差异化特性可归纳为以下三类双模式适配机制。当选项总数超过4个时采用弹框模式承载选项当选项总数不超过4个时采用直选模式直接展示所有选项。选中值回填规则。仅选中单个选项时回填逻辑与单选选择器完全一致选中多个选项时需向输入框回填已选选项的数量统计值。取消操作无变更规则。与单选选择器逻辑一致用户点击取消关闭弹框时不执行任何回填操作选项列表中继器需完全恢复至操作前的初始状态。2️⃣使用方法从元件库的【复选选择器】分类中选取符合需求的组件拖拽至原型画布即可完成基础添加。若选用弹框模式的复选选择器建议复用统一的组件名称与弹框动态面板具体配置方法可参考“3.弹框和蒙层”相关说明。若选用直选模式的组件直接将其拖拽至原型对应布局位置即可完成部署。结合实际设计需求自定义组件内容具体操作按以下顺序执行第一步修改表单关联的标题文本与输入框提示语。第二步调整“选项列表”内的选项名称、配套图标或备注说明信息。字段说明OptionName选项名称所有样式都包含这一属性。按需调整。Comment选项说明文字选项样式包含这一属性。按需调整。Image选项未选中图标弹框样式包含这一属性。可不调整。SelectedImage选项选中图标弹框样式包含这一属性。可不调整。OptionImage选项图标图文选项样式包含这一属性。按需调整。3️⃣制作方法制作思路复选选择器的制作思路与单选选择器重合度达90%仅存在3处核心差异下文仅针对差异点展开说明共性逻辑可回看“4.单选选择器”相关内容。开启选项列表的多选支持能力启用选项列表中继器的「分离选项组Isolate Selection Groups」属性同时无需在选项组合组件上设置选项组名称。新增「选中选项个数」变量用于统计用户实时选中的选项数量实现多选场景下向输入框准确回填已选数量的需求。灵活运用Axure的循环机制遍历已选选项列表实现选项列表中继器选中状态的恢复具体实现逻辑将在交互逻辑模块详细说明。组件结构弹框模式的复选选择器同样由4个模块构成其中输入模块与其他公共模块与单选选择器完全一致可回看“4.单选选择器”相关内容选项模块仅中继器的「分离选项组Isolate Selection Groups」属性、选项组合的选项组名称设置存在差异已在制作思路中说明最核心的差异为变量模块的配置下文将详细展开。变量部分弹框模式下共配置7个变量除「选中选项值」「选中选项值-原值」外新增5个专用变量具体定义如下循环变量基于选项列表中继器的索引值设置的递增变量取值范围为1至中继器总行数。选中索引记录当前选中选项在选项列表中继器内的索引值多选场景下为索引值的组合每次选中/取消选中选项时自动更新。选中索引-原值存储上一次点击确认后回填到输入框的选中索引值每次点击确定按钮时更新。选中选项值记录当前选中选项的名称多选场景下为名称的组合每次选中/取消选中选项时自动更新。选中选项值-原值存储上一次点击确认后回填到输入框的选中选项值每次点击确定按钮时更新。选中选项个数记录当前选中选项的总数量每次选中/取消选中选项时自动更新。选中选项个数-原值存储上一次点击确认后回填到输入框的选中选项数量每次点击确定按钮时更新。直选模式的组件结构与单选选择器完全一致可回看“4.单选选择器”相关内容。交互逻辑弹框显示交互事件、选项列表中继器加载交互事件、蒙层点击交互事件的配置与单选选择器完全一致可回看“4.单选选择器”相关内容。下文仅针对存在差异的交互事件展开详细说明。选项组合点击交互事件点击选项组合时触发「选中」与「取消选中」两种状态切换对应逻辑如下选中操作第一将选项组合置为选中状态并标记对应的数据行确保中继器加载时可根据标记同步更新选项选中状态第二同步更新「选中选项值」「选中索引」「选中选项个数」三个变量。在「选中选项值」变量末尾拼接当前选中的选项名称。在「选中索引」变量末尾拼接当前选中选项对应的索引值与分隔符「i」此处新增字母「i」用于与「选中选项值」的内容做区分。取消选中操作逻辑与选中操作反向执行将选项组合置为未选中状态清除对应行的标记同时删除变量中对应选项的名称字符与索引字符「选中选项个数」变量减1。通过替换函数删除「选中选项值」变量中对应取消选中的选项名称。通过替换函数删除「选中索引」变量中对应取消选中的选项索引值。选项确定点击交互事件Case1为必填配置项第一将当前确认的选中类变量赋值给对应的原值变量第二关闭弹框。Case2与Case3可根据实际场景选择性执行当选中多个选项时调用「选中选项个数」变量回填输入框当选中选项个数为0或1时调用「选中选项值」变量回填输入框。选中个数为0时变量公式计算结果为空输入框自动显示预设提示语选中个数为1时需通过函数删除「选中选项值」末尾的分隔符仅保留选项名称。3.选项取消点击交互事件核心交互动作均在Case1下配置具体逻辑如下由于选中选项名称是通过尾部拼接的方式记录不同的点击顺序可能导致选中选项完全一致但名称排序不同的情况此类场景下简单的不等判断无法识别一致性。本方案暂不针对该场景做优化一方面优化逻辑复杂度较高另一方面不优化也不会影响功能正确性。执行循环重置标记前先清除所有数据行的现有标记。将循环变量设为初始值1匹配中继器索引从1开始的规则通过触发变量的无效移动相对位移为0进入循环变量交互事件正式启动循环遍历流程重置中继器标记具体实现见下文循环恢复交互事件说明。所有标记基于原值变量重置完成后同步更新当前变量值关闭蒙层与弹框动态面板。4.循环恢复交互事件循环逻辑通过变量组件的移动事件与大小修改事件互相调用实现配合循环变量自增逻辑与循环终止条件完成对所有选项的遍历操作。循环核心逻辑为根据当前循环变量值标记中继器对应行Mark Rows其中LVAR1变量指代当前循环变量的取值。循环实现要素包括组件大小无效修改Set Size、无效移动Move、循环变量自增This.text 1、循环终止条件小于中继器数据总行数dataCount。直选模式的复选选择器仅需配置2个交互事件分别为前文提及的「选项列表中继器加载交互事件」与「选项点击交互事件」逻辑已在前文说明此处不再赘述。4️⃣要点总结处理多选场景需求时可通过带分隔符的长字符串记录选中数据间接实现数组的存储效果。面对数组遍历类需求时可灵活调用Axure的交互事件互调能力实现循环遍历的效果。