4.7　全选与取消全选

案例描述

使用复选框来实现全选或取消全选效果，也可以利用按钮或文字作为开关来控制效果。当选中“全选”复选框时，列表中每个复选框都被全部选中；“全选”复选框被取消选中时，列表中的复选框变为取消选中状态，如图4-68所示。列表中单个复选框也可以切换选中或取消选中状态。

思路分析

• ▷　在“复选框”元件上添加“选中改变时”事件。
• ▷　在事件中，添加两个用例，一个是全选中，另一个为取消全选，当选中“全选”复选框时，列表中的复选框全部选中；当取消选中“全选”复选框时，列表中的复选框全部取消选中。

操作步骤

（1）按Ctrl+N快捷键，新建一个Axure的文档。

（2）将“元件库”面板中的“矩形1”元件拖入编辑区适当的位置，并设置x为65，y为65，“宽度”为380，“高度”为200，单击工具栏中的“线段颜色”下三角箭头，在弹出的颜色面板中选择灰色色块（#CCCCCC），如图4-69所示。

（3）再拖入一个“矩形1”元件到编辑区中，设置x为65，y为65，“宽度”为380，“高度”为45，在工具栏中设置矩形边框颜色为灰色（#CCCCCC），“填充颜色”为灰色（#F2F2F2），如图4-70所示。

（4）双击“矩形1”元件使其进入编辑状态，输入“选择你认为最适合居住的城市（可多选）”，如图4-71所示。

（5）将“元件库”面板中的“复选框”元件拖入编辑区适当的位置，并双击使其进入编辑状态，输入“全选”，在右侧“检视：复选框”区域设置名称为all，如图4-72所示。

（6）选择“全选”复选框，按住Ctrl键并拖动复制9个复选框，输入相应的文字，并调整至适当的位置，如图4-73所示。在右侧“检视：复选框”区域分别设置相应的名称，方便后面设置动作。

（7）选择“全选”复选框元件，在右侧“属性”面板中的“添加用例”区域单击“更多事件>>>”下三角箭头，在弹出的下拉菜单中选择“选中改变时”选项，如图4-74所示。

（8）在弹出的“用例编辑<选中改变时>”对话框中设置用例名称为“全选中”，单击“添加条件”按钮，弹出“条件设立”对话框，保持默认设置，如图4-75所示，单击“确定”按钮，返回至“用例编辑<选中改变时>”对话框。

（9）在左侧“添加动作”区域选择“选中”选项，在“配置动作”区域选中除了“当前元件”和“all（复选框）”外的其他复选框，如图4-76所示，单击“确定”按钮返回至编辑区中。

（10）复制刚才添加的用例，修改用例名称为“取消全选”，更改条件语句为false，如图4-77所示。

（11）单击“确定”按钮，返回至“用例编辑<选中改变时>”对话框，设置选中状态值都为false，如图4-78所示。

（12）按Ctrl+S快捷键，以“4.7”为名称保存该文件，然后按F5键预览效果，如图4-79所示。