logo

iMAG移动应用开发指南

Radio

表单单选按钮

标签

标签名 描述 说明
radio 表单单选按钮标签 用于选取单个值

属性

属性名 取值 描述
id String id编码
style String
radio样式,包括:
name String 表单项名称,name相同的radio为一组
value String 表单项的值
text String 表单项显示的文本
checked Boolean 选中状态
true:已选中
false:未选中,默认值
remember Boolean 表单提交时是否记住value
true:记住value
false:不记住value,默认值
disabled Boolean 禁用状态
true:禁用状态
false:非禁用状态,默认值
onclick Javascript 点击时触发的脚本
onfocus Javascript 获得焦点时触发的脚本
onblur Javascript 失去焦点时触发的脚本

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式

控件详解

● 单选按钮

<row>
  <radio id="test_radio1" name="sex" value="male">男</radio>
  <radio id="test_radio2" name="sex" value="female">女</radio>
</row>

效果:

说明 :name相同的radio为一组,同一组的radio只有一个处于选中状态。

● 单选按钮选中项

<row>
  <radio id="test_radio1" name="sex" value="male">男</radio>
  <radio id="test_radio2" name="sex" value="female" checked="true">女</radio>
</row>

效果:

● 禁用单选按钮

<row>
  <radio id="test_radio1" name="sex" value="male" disabled="true">男</radio>
  <radio id="test_radio2" name="sex" value="female" disabled="true">女</radio>
</row>

效果:

● 单选按钮竖排

<row>
  <radio id="test_radio1" name="sex" value="male">男</radio>
</row>
<row>
  <radio id="test_radio2" name="sex" value="female" checked="true">女</radio>
</row>

效果:

● 设置单选按钮文本样式

<row>
  <radio id="test_radio1" name="sex" value="male" style="color:green;font-size:18">男</radio>
</row>
<row>
  <radio id="test_radio2" name="sex" value="female" style="color:green;font-size:18">女</radio>
</row>

设置radio中文本的颜色和字体大小等属性。

● 设置单选按钮颜色(仅iOS)

<row>
  <radio id="test_radio1" name="sex" value="male" style="tint-color:green">男</radio>
</row>
<row>
  <radio id="test_radio2" name="sex" value="female" style="tint-color:green">女</radio>
</row>

通过tint-color设置单选按的颜色,仅iOS系统可以设置。

● 禁用单选按钮

$('test_radio1').disabled = true;

● 修改单选按钮选中状态

$('test_radio1').checked = true;

● 隐藏单选按钮

$('test_radio1').css('display', 'none');
$('test_radio2').css('display', 'none');

$('test_radio1').css('display', 'hidden');
$('test_radio2').css('display', 'hidden');

● 显示单选按钮

$('test_radio1').css('display', 'block');
$('test_radio2').css('display', 'block');

● 单选按钮点击事件

<radio name="sex9" id="radio_male" value="male" onclick="hint(this.value)">男</radio>

● 创建单选按钮

 var radio1 = $C('<radio id="test_radio1" name="sex" value="male">男</radio>');
 $('test_row').add(radio1);
 var radio2 = $C('<radio id="test_radio2" name="sex" value="female">女</radio>'})
 $('test_row').add(radio2);

示例下载

点此下载radio相关的示例代码:imag-radio.zip