<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选定复选框</title>
<script language="javascript">
function selText()
{
    document.getElementsByTagName('input')[0].select()
}

function unSelText()
{
    var inp = document.getElementById("myText");
    inp.value = inp.value;
}

function setFocus()
{
    document.getElementsByTagName('input')[0].focus()
}

function loseFocus()
{
    document.getElementsByTagName('input')[0].blur()
}
  
function check()
{
    document.getElementById("myCheck").checked=true;
    selText();
}

function uncheck()
{
    document.getElementById("myCheck").checked=false;
    unSelText();
}

function checkAll(name) 
{ 
    var el = document.getElementsByTagName('input');
    var len = el.length; 
    for(var i=0; i<len; i++) 
    { 
        if((el[i].type=="checkbox") && (el[i].name==name)) 
        { 
              el[i].checked = true; 
        } 
    } 
}

function clearAll(name) 
{ 
    var el = document.getElementsByTagName('input'); 
    var len = el.length; 
    for(var i=0; i<len; i++) 
    { 
        if((el[i].type=="checkbox") && (el[i].name==name)) 
        { 
              el[i].checked = false; 
        } 
    } 
}

</script>
</head>

<body>
<form>
<p><input type="text" id="myText" name="wenben" value="内容" onfocus="this.select();" style="border:none" /></p>
<p><input type="button" value="选取文本内容" onclick="selText()"></p>
<p><input type="button" onclick="setFocus()" value="设置焦点" /><p>
<p><input type="button" onclick="loseFocus()" value="失去焦点" /><p>
<p><input type="checkbox" id="myCheck" /></p>
<p><input type="button" onclick="check()" value="选定复选框" /></p>
<p><input type="button" onclick="uncheck()" value="取消选定复选框" /></p>
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }">字母全选开关 
<input type="checkbox" name="test" value="a">a 
<input type="checkbox" name="test" value="b">b 
<input type="checkbox" name="test" value="c">c 
<input type="checkbox" name="test" value="d">d 
<input type="checkbox" name="test" value="e">e 
<input type="checkbox" name="test" value="f">f 
<input type="checkbox" name="test" value="g">g 
<br> 
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }">数字全选开关 
<input type="checkbox" name="num" value="1">1 
<input type="checkbox" name="num" value="2">2 
<input type="checkbox" name="num" value="3">3 
<br> 
<input type="button" value="选择所有的字母" onclick="checkAll('test')"> 
<input type="button" value="清空选中的字母" onclick="clearAll('test')"> 
<br>
<input type="button" value="选择所有的数字" onclick="checkAll('num')"> 
<input type="button" value="清空选中的数字" onclick="clearAll('num')"> 
</form>

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"> 
<div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"> 
这些文字显示在内层元素中。 
</div> 
</div> 
<p>scrollTop值是：<span id="演示元素scrollTop的值"></span></p> 
<script type="text/javascript"> 
var 外层元素_div = document.getElementById("外层元素"); 
外层元素_div.onscroll=读取scrollTop的值并显示出来; 
////注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件 
var span_演示元素scrollTop的值 = document.getElementById("演示元素scrollTop的值"); 
//onscroll事件的处理函数 
function 读取scrollTop的值并显示出来() 
{span_演示元素scrollTop的值.innerHTML=外层元素_div.scrollTop; 
//读取"外层元素"此时的scrollTop的值并显示出来 
} 
读取scrollTop的值并显示出来(); 
//页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0 
</script> 
</body>
</html>