Chinese
Sign in / Sign up

Javascript单选框对象

如何使用 javascript 改变单选框状态？
or
哪些是与 RadioButton 有关的方法？

解释

HTML 表单单选框按钮（radiobutton）基础知识
单选框按钮对象 :
如下语法演示获取表单上的单选按钮
语法: document.formname.radioname
示例代码:
<form name=testform>
<input name=rb1 value=test type=radio>
<input name=rb2 value=test2 type=radio>
</form>
<script language="javascript">
var rbobject= document.testform.rb1;
</script>

对象 rbobject 是单选框对象数组。如需使用第一个单选框，我们需要调用 rbobject[0]，第二个用 rbobject[1] 等等。 这里是与单选框有关的事件、 dom 属性和方法。
事件句柄: 与表单控件类型单选框相关:
如下所有示例使用了 javascript 自定义函数 output
<script language=javascript>
function output()
{
alert("测试 RadioButton 事件");
}
</script>
事件 说明 示例
onMouseOver 当鼠标指针移动到单选框上的时候触发 <input type=radio onMouseOver="output()">
结果： RB1
onMouseDown 当在单选框上按下鼠标的时候触发 <input type=radio onMouseDown="output()">
结果： RB1
onMouseUp 当在单选框上释放鼠标的时候触发 <input type=radio onMouseUp="output()">
结果： RB1
onClick onClick 函数当用鼠标点击单选框后触发 <input type=radio onClick="output()">
结果： RB1
onBlur 当 通过按 Tab 键等方式让单选框失去焦点时触发 <input type=radio onBlur="output()">
结果： RB1
onFocus 当 通过按 Tab 键等方式让单选框获得焦点时触发 <input type=radio onFocus="output()">
结果： RB1

DOM 属性:
如下是 DOM (文档对象模型 Dynamic Object Model) 中定义的属性列表 可用于在 javascript 中获取或修改复选框属性。
下面的示例代码基于表单
<form name=testrb>
<input name=myrb1 type=radio value=xxx> Checking 1
<input name=myrb2 type=radio value=xxx> Checking 2
</form>
DOM 属性 说明 示例
checked 用于检查单选框是否选中或选中单选框 检查时用:
var ss = document.testb.myrb[0].checked;
选中时用:
document.testb.myrb[1].checked = true;
这样可以选中第二个单选框。
defaultChecked 用于检查是否默认选中单选框 获取时用：
var ss = document.testb.myrb[0].defaultChecked;
form 用户获取单选框的上级对象（即表单对象） 获取时用：
var ss = document.testb.myrb[0].form;
name 用于获取单选框对象的名称 获取时用：
var ss = document.testb.myrb[0].name;
type 用于获取表单控件类型 获取时用：
var ss = document.testb.myrb[0].type;
value 用于设置或者获取单选框的值 获取时用：
var ss = document.testb.myrb[0].value;
设置时用：:
document.testb.myrb[0].value = "testy";

DOM 方法:
如下是 DOM (文档对象模型 Dynamic Object Model) 中定义的方法列表 用于在 javascript 中完成动态修改如单选框选择事件等代码。
DOM 方法 说明 示例
click() 用户动态选择单选框 To Click:
document.testb.myrb.click();
blur() 用于动态让单选框失去焦点 To Blur:
document.testb.myrb.blur();
focus() 用于动态让单选框获取焦点 To Focus:
document.testb.myrb.focus();

示例：当鼠标移动到单选框上时选中它
<script language=javascript>
function rbevent()
{
var xx = document.xx.rbtest;
xx.checked = true;
}
</script>

<form name=xx>
<input type=radio name=rbtest onMouseOver="rbevent()"> 选中我了吗
</form>
结果：
选中我了吗

上一頁下一頁

Java Script 教程