1.首先在左下角的图形库里选择三个单选按钮（以三个按钮为例），并分别对三个按钮命名，命名方式是选中要命名的按钮，在属性上面的空白框里输入命名，操作如下所示：

2.选中按钮操作的实现：由于该页面存在三个按钮，要实现单选的效果，必须要使这几个按钮产生互斥，那么这时候我们需要利用交互中的添加用例，当我们选中其中一个按钮时（选中状态为true），其他两个按钮的选中状态就应该为false，这里我们以“man”这个单选按钮为例，即将man按钮的选中状态设置为true，同时其他两个按钮设置为false即可，具体操作如下所示：

由于woman及baomi按钮选中互斥的操作与man按钮操作类似，这里不多说。完成了单选按钮的设置，那么问题来了，我们要如何将选中按钮的内容可以显示在对应的文本框呢？与此同时，当内容显示在文本框时，对应的单选按钮还是处于选中的状态（在点击下一个按钮之前）？

3.将选中的单选按钮内容显示在对应的文本框中：首先需要在工作区域拖入一个文本框，为了后续便于区分，这里我们将文本框命名为“展示选中内容”，再添加一个button按钮来触发交互行为，以下所有设置都是在该按钮上设置的。

a.选中按钮的设置：选中按钮，选择交互行为中的添加用例，在弹出的用例编辑页面双击case1，弹出条件设立弹框，设置对应的状态，以man按钮为例，具体操作如下所示：

b.选择“设置文本”，双击中间模块的内容，右边会对应弹出配置动作相应的图形，勾选要显示内容的文本框，在右下角填入文本框中要显示的内容“男”，点击确定，预览就可以发现文本框中会显示选中按钮的内容，具体操作如下所示：

c.在内容显示在文本框时，选择下一个选中按钮之前，对应的单选按钮还是处于选中的状态的设置，具体操作如下所示：

三个按钮设置完成之后如下图所示：

4.按F5预览效果如下：

案例1：实现单选按钮，并将单选按钮内容填充至文本框（1）元件准备：三个单选按钮，一个button按钮，一个文本框（2）分析：a.单选按钮的实现；                     b.将选中按钮的内容填充至文本框；                     c.在下一个选中按钮的行为产生之前，对应的单选按钮还是处于选中的状态。操作步骤：1.首先在左下角的图形库里选择三个... <div class="form-group qwe" id="qwe" > <label class="control-label col-xs-12 col-sm-2">{:__('User_vip')}:</label> <div class=... （1）表单 中 设置4个 文本框 、1个 按钮 、1个重置 按钮 ，其 中 梯形的面积 文本框 设置为只读； （2）编写两个自定义函数，分别是计算梯形的面积函数area（a,b,c）、在页面上 显示 结果show()，并在show()函数 中 调用area(a,b,c)函数(a为长度，b为宽度，c为高度)； （3）输入完长、宽、高后，点击“计算梯形的面积” 按钮 后，将计算结果 显示 在“梯形的面积” 文本框 中 ；（4）点击“重置” 按钮 后，将所有 文本框 清空；（5）梯形的面积保留2位小数。. <label><input type="radio" name="option" onclick="showText()">选项一</label> <div id="hidden_text" style=";"> <label> 文本框 ：</label> <input type="text"> 然后，在JavaScript 中 编写一个函数showText()，用来控制 文本框 的 显示 与隐藏： function showText() { var hiddenDiv = document.getElementById("hidden_text"); if (hiddenDiv.style.display === "none") { hiddenDiv.style.display = "block"; } else { hiddenDiv.style.display = "none"; 当 选中 单选 框时，调用showText()函数即可 实现 隐藏 文本框 的 显示 。