HTML 表单复选框基础
复选框对象 :
用如下方法可以在 javascript 中引用表单上的复选框对象
语法: document.formname.checkboxname
示例代码:
<form name=testform>
<input name=cb1 value=测试 type=checkbox>
<input name=cb2 value=测试2 type=checkbox>
</form>
<script language="javascript">
var cbobject= document.testform.cb1;
</script>
对象 cbobject 是复选框项目的数组。
要使用第一个复选框， 我们需要调用 cbobject[0]，第二个应该是
cbobject[1] 等等。 这里是复选框相关的事件、 dom 属性和方法。
事件: 表单控件复选框相关:
所有如下示例使用 javascript 自定义函数 output
<script language=javascript>
function output()
{
alert("测试复选框事件");
}
</script>
DOM 属性:
如下是 DOM (文档对象模型 Dynamic Object Model) 中定义的属性列表
可用于在 javascript 中获取或修改复选框属性。
下面的示例代码基于表单
<form name=testb>
<input name=mycb type=checkbox value=111> box1
<input name=mycb type=checkbox value=222> box2
</form>
| DOM 属性 | 说明 | 示例 |
| checked | 用户选择复选框。
每个元素都可以独立选择，如果选择复选框将返回真值 true，否则返回 false。 |
选择时用：
var ss = document.testb.mycb[0].checked;
var ss1 = document.testb.mycb[1].checked;
选择时用:
document.testb.mycb[0].checked = true;
|
| defaultChecked | 用于检查是否默认选择 |
获取时用:
var ss = document.testb.mycb[0].defaultChecked;
|
| form | 用户获取复选框的上级对象（表单对象） |
获取时用:
var ss = document.testb.mycb[0].form;
|
| name | 用于获取复选框对象的名称 |
获取时用:
var ss = document.testb.mycb[0].name;
|
| type | 用于获取表单控件类型 |
获取时用:
var ss = document.testb.mycb[0].type;
|
| value | 用于设置或者获取复选框的值 |
获取时用:
var ss = document.testb.mycb[0].value;
设置时用::
document.testb.mycb[0].value = "性急";
|
DOM 方法:
如下是 DOM (文档对象模型 Dynamic Object Model) 中定义的方法列表
用于在 javascript 中完成动态修改如复选框选择事件等代码。
| DOM 方法 | 说明 | 示例 |
| click() | 用户动态选择复选框 |
单击时用:
document.testb.mycb.click();
|
| blur() | 用于动态让复选框失去焦点 |
失去焦点时用:
document.testb.mycb.blur();
|
| focus() | 用于动态让复选框获取焦点 |
获取焦点时用:
document.testb.mycb.focus();
|
示例: 选择复选框
<script language=javascript>
function cbevent()
{
var xx = document.xx.cbtest;
xx.checked = true;
}
</script>
<form name=xx>
<input type=checkbox name=cbtest onMouseOver="cbevent()"> 选择
</form>
结果：
| 
导言
