logo

iMAG移动应用开发指南

Checkbox

表单多选按钮

标签

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

属性

属性名 取值 描述
id String id编码
style String
checkbox样式,包括:
type String Checkbox的类型,取值:
switch:设置type="switch"checkbox将显示为切换开关
name String 表单项名称
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 设置多个样式

控件详解

● 多选按钮

<checkbox name="remember" value="true">记住密码</checkbox>

● Switch风格多选按钮

<checkbox type="switch" name="remember" value="true" checked="true">记住密码</checkbox>

设置type="switch"

● 设置多选按钮颜色

<checkbox type="switch" name="remember" style="tint-color:red" value="true" checked="true">记住密码</checkbox>

设置样式tint-color控制checkbox的颜色

● 设置多选按钮文本样式

<checkbox name="remember" style="color:blue;font-size:18" value="true" checked="true">记住密码</checkbox>

设置color,font-size等文本样式

● 禁用多选按钮

<checkbox name="remember" value="true" disabled="true">记住密码</checkbox>
<checkbox type="switch" name="remember" value="true" disabled="true">记住密码</checkbox>

● 设置多选按钮选中状态

$('test_checkbox').checked = true

● 隐藏单选按钮

$('test_checkbox').css('display', 'none');
$('test_checkbox').css('display', 'hidden');

● 显示单选按钮

$('test_checkbox').css('display', 'block');

● 动态创建多选按钮

var chekbox = $C('<checkbox name="remember" value="true">记住密码</checkbox>');
$('test_item').add(chekbox);
 

示例下载

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