Chinese
Sign in / Sign up

Javascript 复选框对象

javascript 中如何改变复选框选中状态？
或者
哪些是复选框中相关的事件？

解释

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>
事件 说明 示例
onMouseOver 当鼠标指针移动到复选框上的时候触发 <input type=checkbox onMouseOver="output()">
结果： CB1
onMouseDown 当在复选框上按下鼠标的时候触发 <input type=checkbox onMouseDown="output()">
结果： CB1
onMouseUp 当在复选框上释放鼠标的时候触发 <input type=checkbox onMouseUp="output()">
结果： CB1
onClick onClick 函数当用鼠标点击复选框后触发 <input type=checkbox onClick="output()">
结果： CB1
onBlur 当 通过按 Tab 键等方式让复选框失去焦点时触发 <input type=checkbox onBlur="output()">
结果： CB1
onFocus 当 通过按 Tab 键等方式让复选框获取焦点时触发 <input type=checkbox onFocus="output()">
结果： CB1

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>
结果：
检查

上一頁下一頁

Java Script 教程