复选框

简介

复选框(checkbox)允许用户在一定数目的选择中选取一个或多个选项。其中id、name为必要属性。


使用方法

2.1 静态框架使用方法仅EAS7.5版本
<wafctrl:checkbox id="purchase" name="org" label="采购组织" value="1"></wafctrl:checkbox>
<wafctrl:checkbox id="sale" name="org" label="销售组织" value="0"></wafctrl:checkbox>
<wafctrl:checkbox id="fiance" name="org" label="财务组织" value="0"></wafctrl:checkbox>
2.2 JS动态创建EAS8.0+
var parent = waf("body");
var options = {
        checked:"false",
	disabled:false,
	hidden:false,
	id:"purchase",
	name:"org",
	label:"采购组织",
	labelAlign:"right",
	labelPosition:"left",
	readonly:false,
	req:false,
	tabindex:0
    };
var dom = waf.createDOM("checkbox", options);
waf.appendDOM(parent, dom);
waf.initComponent("checkbox", options, dom);
2.3 通用DOM创建EAS8.0+
<input type="checkbox" id="purchase" name="org"/>
var options = {
        checked:"false",
	disabled:false,
	hidden:false,
	label:"采购组织",
	labelAlign:"right",
	labelPosition:"left",
	readonly:false,
	req:false,
	tabindex:0
    };
<!--DOM创建好之后,使用js初始化控件-->
waf("#purchase").wafCheckbox(options);
2.4 方法&事件使用EAS7.5+
//调用方法
waf("#purchase").wafCheckbox("method", parameter...);
//eg:方法调用
waf("#purchase").wafCheckbox("getValue");
waf("#purchase").wafCheckbox("option","checked",true);
waf("#purchase").wafCheckbox("disable");
//eg:更改事件
waf("#purchase").wafCheckbox("option","onchange",fn);

属性说明

id String 缺省值: null 不可以在运行期改变 EAS7.5+

定义复选框元素本身的id

name String 缺省值: null 不可以在运行期改变 EAS7.5+

定义复选框的名称

tabindex Integer 缺省值: 0 EAS7.5+

规定按下tab键时复选框控件获得焦点的顺序,默认值为0

label String 缺省值: “” 不可以在运行期改变 EAS7.5+

定义复选框的文字描述

disabled Boolean 缺省值: false EAS7.5+

定义复选框的禁用状态,默认值为false。

hidden Boolean 缺省值: false EAS7.5+

定义复选框的隐藏状态,默认值为false。

checked Boolean 缺省值: false EAS7.5+

定义选中状态的元素值,默认值为false,可接收EL表达式。当取布尔值时,如果checked为true时,该复选框为选中状态,否则为非选中状态;当取字符串时,如果该复选框的value值存在于checked值中,则该复选框选中,多选情况下,checked中的值用%22,%22分割。

value Object 缺省值: 1 不可以在运行期改变 EAS7.5+

定义复选框发送到服务器的值

tagClass String 缺省值: null EAS7.5+

定义复选框的样式类

style String 缺省值: null EAS7.5+

定义复选框的样式


方法说明

option 参数: (property[,value]) 返回值类型: (任何类型) EAS7.5+

获得或设置复选框某属性的值,当value参数存在时,设置控件的property属性值,且无返回值,否则返回控件的property属性值 [参考样例]

  • 参数说明:
        - property: 必要参数,复选框的属性value-可选参数,复选框的属性值
  • 返回值说明:
        参数没有value时,返回值为相应属性的值,返回值类型为属性对应的类型;参数有value时此方法的作用是设置属性的值,没有返回值。

option 参数: (options) 返回值类型: (undefined) EAS7.5+

对控件多个属性进行一次性设置 [参考样例]

  • 参数说明:
        - options: 形式如{property:value[,property1:value1,…]}的json对象,用来描述复选框的属性和相应的值
  • 返回值说明: 无

isChecked 参数: (无) 返回值类型: (Boolean) EAS7.5+

返回是否被选中 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

setChecked 参数: ([value]) 返回值类型: (undefined) EAS7.5+

设置复选框的选中状态 [参考样例]

  • 参数说明:
        - value: 是否被选中,如果不指定,默认为true
  • 返回值说明: 无

disable 参数: (无) 返回值类型: (undefined) EAS7.5+

禁用复选框 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

enable 参数: (无) 返回值类型: (undefined) EAS7.5+

启用复选框 [参考样例]

  • 参数说明: 无
  • 返回值说明: 无

事件说明

onclick 参数: (event,ui) EAS7.5+

复选框被点击时触发onclick事件。 [参考样例]

  • 参数说明:
        - event: 原始事件对象
        - ui: ui.value为该选项的值,ui.label为该选项的标签文字,ui.checked表示该选项的选中状态

onchange 参数: (event,ui) EAS7.5+

复选框的选中状态发生改变时触发onchange事件,比如动态设置复选框的checked属性,使其发生变化。 [参考样例]

  • 参数说明:
        - event: 原始事件对象
        - ui: ui.value为该选项的值,ui.label为该选项的标签文字,ui.checked表示该选项改变后的选中状态

样例集合

  1. 复选框属性
  2. 复选框方法
  3. 复选框事件
  4. 动态化