单选多选（CocosCreator）

最新推荐文章于 2023-10-24 00:21:49 发布

爱上游戏开发

最新推荐文章于 2023-10-24 00:21:49 发布

阅读量4.4k

点赞数 5

分类专栏： CocosCreator 文章标签：单选多选 CocosCreator单选多选单选多选单选框复选框

本文链接：https://blog.csdn.net/shirln/article/details/88826909

版权

本文详细介绍了在CocosCreator中实现单选多选功能的需求与步骤。从UI界面创建，如添加ToggleGroup组件，到获取用户答案，通过判断Toggle组件的IsChecked属性，再到显示答题结果，对单选、多选题的不同判断方式，提供了完整的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐阅读：

我的CSDN

我的博客园

QQ群：704621321

1.前沿

首先来说说我们的需求吧：随机出现单选题或者多选题，完全回答正确才算正确（多选题中少选错选算错），核实答案的正确性，某个选项选择正确出现选项正确标志，某个选项选择错误出现错误标志（选项错误包括单选中选择错误的选项；多选中未选择的选项）。

2.UI界面

下面，先来实现单选多选界面：
单选：
在这里插入图片描述
为singleAnswer添加ToggleGroup组件

为每个option选项天机Toggle组件，并制定组为SingleAnswer

多选：多选只需要在单选的基础上去掉ToggleGroup组件，并删掉每个option的所属组。

3.获取用户答案

代码判断用户选择的选项，并将其保存在数组中：

    submitAnswer() {
   
        var self = this;
        let answerArr = [];
        if (self.isSingle) {
   
            for (let i = 0; i < self.uiRoot.singleOptions.length; i++) {
   
                let isSelect = self.uiRoot.singleOptions[i].getComponent(cc.Toggle).isChecked;
                if (isSelect) {
   
                    answerArr.push(i);
                }
            }
            cc.log(