radioButton(id, checked, group) 创建单选按钮

功能分类： UI Controls Applab JavaScript 少儿编程

在默认的（0,0）位置，创建一个指定 id 以及默认选中状态 checked 的 radioButton 单选按钮。在一个组合里，只能有一个单选按钮选项被选中。

在很多 APP 应用里需要让用户从几个选项中选择一个。这时候就可以使用 radioButton() 在页面上创建单选按钮。如果不指定分组，则每个 adioButton 单选按钮 默认在各自独立的未命名的组里。

示例代码


// 不指定分组创建颜色选择单选按钮
radioButton("RedButton", false);
textLabel("RedLabel","Red","RedButton");
radioButton("BlueButton", false);
textLabel("BlueLabel","Blue","BlueButton");
radioButton("GreenButton", false);
textLabel("GreenLabel","Green","GreenButton");
radioButton("OrangeButton", false);
textLabel("OrangeLabel","Orange","OrangeButton");

示例代码：单选按钮点击事件 指定分组创建颜色选择单选按钮，并处理点击事件。


// 指定分组创建颜色选择单选按钮，并处理点击事件。
radioButton("RedButton", false,"ColorGroup");
textLabel("RedLabel","Red","RedButton");
radioButton("BlueButton", false,"ColorGroup");
textLabel("BlueLabel","Blue","BlueButton");
radioButton("GreenButton", false,"ColorGroup");
textLabel("GreenLabel","Green","GreenButton");
radioButton("OrangeButton", false,"ColorGroup");
textLabel("OrangeLabel","Orange","OrangeButton");

textLabel("favorite1","Your Favorite Color is: ");
textLabel("favorite2","");
onEvent("RedButton", "click", function() {
  setText("favorite2","Red");
});
onEvent("BlueButton", "click", function() {
  setText("favorite2","Blue");
});
onEvent("GreenButton", "click", function() {
  setText("favorite2","Green");
});
onEvent("OrangeButton", "click", function() {
  setText("favorite2","Orange");
});

示例代码：单选按钮遍历 点击按钮时，遍历并找出选中状态的单选按钮。


// 点击按钮时，遍历并找出选中状态的单选按钮。
radioButton("Red", false,"ColorGroup");
textLabel("RedLabel","Red","Red");
radioButton("Blue", false,"ColorGroup");
textLabel("BlueLabel","Blue","Blue");
radioButton("Green", false,"ColorGroup");
textLabel("GreenLabel","Green","Green");
radioButton("Orange", false,"ColorGroup");
textLabel("OrangeLabel","Orange","Orange");

button("favorite","What's my favorite color?");
onEvent("favorite","click", function() {
    var radioIDs = ["Red","Blue","Green","Orange"];
    var index = 0;
    while (index < radioIDs.length && !getChecked(radioIDs[index])) {
      index++;
    }
    console.log("Your favorite color is: " + radioIDs[index]);
});

语法规则


radioButton(id, checked, group)

参数说明

名称 类型 必需 参数描述
id string Yes screen 屏幕控件 的 id 唯一标识。必须以字母开头，不能包含空格，可以包含字母、数字、减号 - 以及下划线 _ 。
checked boolean yes 初始化 radioButton 单选按钮 是否为被选中状态。
group string no 指定单选按钮关联的组名。在一个组合里，只能有一个单选按钮选项被选中。如果不指定分组，则每个 radioButton 单选按钮 默认在各自独立的未命名的组里。

返回值

没有返回值。只在显示结果页面体现代码执行前后变化。

提示说明

  • 如果在屏幕的（0,0）位置已经有别的控件，radioButton 单选按钮 会被放置到原有控件的右侧或下方，紧挨原有控件放置。
  • 可以用于修改显示控件属性的方法有：setChecked()、showElement()、hideElement()、deleteElement()、setPosition()、setSize()。
  • 可以用于获取显示控件状态或属性值的方法有：getChecked()、getXPosition()、getYPosition()。
  • radioButton 单选按钮 经常与 textLabel 文本标签 搭配使用，以提示用户进行操作。
  • 如果选项只有一个，可以考虑使用一个 checkbox 复选框 来实现。
  • radioButton 单选按钮 也可以在 设计 模式下通过拖拽的方式添加到屏幕页面，并设置其属性。

查看更多少儿编程教程、JavaScript 介绍

返回文档首页