<!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="200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"> <div style="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>