微信小程序之循环创建按钮，单个按钮单个点击效果

一、需求

实现效果图

考试系统选择题，常规包括单选和多选，选择项有可能为1~7项。展示选择项时有两种方式，一种是穷举法；另一种是循环法。穷举法就是把所有选择项都罗列出来，对应不同的点击属性，程序实现没有问题，就是代码显得重复又啰嗦。如下图：

穷举法

循环法根据选择项数量，循环渲染，如下图：

循环法

循环法代码相对简洁，需求：循环产生的按钮如何设置不同的属性，譬如点击一个选项时，该选项颜色变化，但其它选项保持不变，如第一张图。

二、单选题设计实现

单选题，被点击的选择项颜色变化，其它选择项保持不变，为此可以设计一个数组，用来保存被点击的id，在wxml中判断index是否和保存值相同，相同则颜色变化，不同则颜色默认。

js代码如下：

单选题

wxm如下：

wxml

三、多选题设计和实现

多选题，需要把每个button设计成checkbox，每个选择项点击时，在选中和不选中之间切换；同时把checked属性记录下来。

js代码如下：

增加checked属性

点击事件js代码如下：

点击时checked切换

wxml如下：

wxml