html中radio控件的简单操作
<form name="mainFrm" method="post" action="">
<input type="radio" name="status" value="Y">通过
<input type="radio" name="status" value="N">未通过
</form>
用JavaScript判断radio是否被选中：
方法一：
function radioChecked1(){
var radioLength = document.mainFrm.status.length;
for (var i=0; i<radioLength; i++) {
if (document.mainFrm.status[i].checked) {
alert(document.mainFrm.status[i].value);
}
}
}
方法二：
function radioChecked2(){
var radioBox = document.getElementsByName(status);
var retVal = "";
for (var i = 0; i < radioBox.length; i++) {
if (radioBox[i].type == "radio" && radioBox[i].checked) {
retVal = radioBox[i].value;
break;
}
}
return retVal;
}
返回页面同名radio的个数：
function getRadioCount(status) {
var radioBox = document.all[status];
var retVal = 0;
try {
retVal = (radioBox[0] == null) ? 1 : radioBox.length;
} catch(exception) {
}
return retVal;
}
返回选中的是第几个radio：
function getCheckedRadioIndex(status) {
var radioBox = document.getElementsByName(status);
var retVal = 0;
for (var i = 0; i < radioBox.length; i++) {
if (radioBox[i].type == "radio" && radioBox[i].checked) {
retVal = i;
break;
}
}
return retVal;
}
使指定值的radio被选中：(其中val就是页面中的"Y"或"N")
function makeRadioChecked(status, val) {
var obj = document.all[status];
try {
if (obj) {
if (obj.type == "radio" && obj.value == val) {
obj.checked = true;
}
for (var i = 0; i < obj.length; i++) {
if (obj[i].type == "radio" && obj[i].value == val) {
obj[i].checked = true;
break;
}
}
}
} catch(exception) {
alert("error");
}
}
=============================================================================================
使用JS在textarea在光标处插入内容
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
// 在光标处插入字符串
// myField 文本框对象
// 要插入的值
function insertAtCursor(myField, myValue)
{
//IE support
if (document.selection)
{
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0')
{
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
// save scrollTop before insert
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
if (restoreTop > 0)
{
// restore previous scrollTop
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
}
</script>
===========================================================================
getElementById()，getElementsByName()，getElementsByTagName的用法和区别
1、定义：
getElementById(id)，以id标识符取得对象，是一个对象;
getElementsByName(name)，以name取得节点清单，是一个数组集合;
getElementsByTagName(tagname)，返回带有指定标签名的对象的集合.
2、一个文件中id是唯一的，但是name可以重名(比如radio)， 所以，getElementById获得的是单个对象，用getElementById("id")直接访问， 而getElementsByName获得的结果以数组形式表示，访问getElementsByName获得的对象的方法是getElementsByName("name")[i]。访问哪个标签对象用getElementsByTagName("tagName")[i],注意getElementsByTagName的字符串可以不区分大小写。
3、比如有两个DIV：
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
那么可以用getElementsByName("docname")获得这两个DIV，用getElementsByName("docname")[0]访问第一个DIV对象，用getElementsByName")[1]访问第二个DIV对象。具体访问哪个对象还有用getElementById("docid1");
4,例子
(1)
Java代码
<html>
<head>
<script>
function idfun1(){
var v = document.getElementById("divOne");
v.innerText="linjianqinghao"; //写入信息
}
function idfun2(){
var v = document.getElementById("divOne");
v.innerText="you are very good"; //写入信息
}
</script>
</head>
<body>
</body>
<input type="button" value="显示信息1" onclick="idfun1()"> <!--换成图片可以制作菜单-->
<input type="button" value="显示信息2" onclick="idfun2()"><br><br>
<div id="divOne" style="width:100,height:100"></div>
</html>
<html>
<head>
<script>
function idfun1(){
var v = document.getElementById("divOne");
v.innerText="linjianqinghao"; //写入信息
}
function idfun2(){
var v = document.getElementById("divOne");
v.innerText="you are very good"; //写入信息
}
</script>
</head>
<body>
</body>
<input type="button" value="显示信息1" onclick="idfun1()"> <!--换成图片可以制作菜单-->
<input type="button" value="显示信息2" onclick="idfun2()"><br><br>
<div id="divOne" style="width:100,height:100"></div>
</html>
(2)
Html代码
<html>
<head>
<script>
function namefun() {
var s = document.getElementsByName("sex");
for(var i=0;i<s.length;i++) {
if(s[i].checked) { //选中发生的事件
alert(s[i].value);
}
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><input type="radio" name="sex" value="0" id="s0" onclick="namefun()">男</td>
<td><input type="radio" name="sex" value="1" id="s1" onclick="namefun()">女</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<script>
function namefun() {
var s = document.getElementsByName("sex");
for(var i=0;i<s.length;i++) {
if(s[i].checked) { //选中发生的事件
alert(s[i].value);
}
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><input type="radio" name="sex" value="0" id="s0" onclick="namefun()">男</td>
<td><input type="radio" name="sex" value="1" id="s1" onclick="namefun()">女</td>
</tr>
</table>
</form>
</body>
</html>
(3)
Html代码
<html>
<head>
<script>
function tagNamefun(i) {
var s = document.getElementsByTagName("input");
s[i].value='请输入'+s[i].name;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>用户名:<input type="text" name="username" onfocus="tagNamefun(0)"></td>
</tr>
<tr>
<td>密码:<input type="text" name="password" onfocus="tagNamefun(1)"></td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<script>
function tagNamefun(i) {
var s = document.getElementsByTagName("input");
s[i].value='请输入'+s[i].name;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>用户名:<input type="text" name="username" onfocus="tagNamefun(0)"></td>
</tr>
<tr>
<td>密码:<input type="text" name="password" onfocus="tagNamefun(1)"></td>
</tr>
</table>
</form>
</body>
</html>
(4)
Html代码
<html>
<head>
<script>
function keyup(obj){
var vOne = obj.value.length;
//name也有时会被视作id(如在textarea中)
// 等价于document.getElementById("txaTwo").value = vOne;
//等价于document.getElementsByName("txaTwo")[0].value = vOne;
formOne.txaTwo.value = vOne;
}
</script>
</head>
<body >
<form name="formOne">
<table>
<tr>
<td><textarea name="txaOne" onkeyup="keyup(this)"></textarea></td>
<td><textarea name="txaTwo"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<script>
function keyup(obj){
var vOne = obj.value.length;
//name也有时会被视作id(如在textarea中)
// 等价于document.getElementById("txaTwo").value = vOne;
//等价于document.getElementsByName("txaTwo")[0].value = vOne;
formOne.txaTwo.value = vOne;
}
</script>
</head>
<body >
<form name="formOne">
<table>
<tr>
<td><textarea name="txaOne" onkeyup="keyup(this)"></textarea></td>
<td><textarea name="txaTwo"></textarea></td>
</tr>
</table>
</form>
</body>
</html>