这几天闲来无事，回顾了下以前的代码练习，发现还有许多应用得上的，这里便将其发出来，仅供参考
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>练习</title>
</head>
<body>
<div>练习一:
如下文本框,当输入内容后,默认的提示消失,文字变为黑色;<br>
如果没有输入内容,则文字还原为灰色,提示保留
</div>
<input type="text" id="myinput" value="请输入姓名" style="color: gray;"/>
<hr/>
<div>
<input type="checkbox" name="items" value="吃饭">吃饭
<input type="checkbox" name="items" value="睡觉"> 睡觉
<input type="checkbox" name="items" value="打豆豆">打豆豆
<input type="checkbox" name="items" value="音乐">音乐
<input type="checkbox" name="items" value="游戏">游戏
</div>
<div><input type="button" name="checkall" id="checkall" value="全选">
<input type="button" name="checkall" id="checkNo" value="全不选">
<input type="button" name="checkall" id="checkReverse" value="反选">
</div>
</body>
</html>
<script>
function addListener(element,e,fn){
if(element.addEventListener)
{
element.addEventListener(e,fn,false);
}
else
{
element.attachEvent("on" + e,fn);
}
}
var myinput = document.getElementById("myinput");
addListener(myinput,"click",function(){
myinput.value = "";
})
addListener(myinput,"blur",function(){
myinput.value = "请输入您的ID";
})
document.getElementById('checkall').onclick=function(){
/*************************************************/
// 获取所有的复选框
var checkElements=document.getElementsByName('items');
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
// 方法一
// checkElement.setAttribute('checked',' checked');
// 方法二
checkElement.checked="checked";
}
}
/*************************************************/
// 处理全不选
document.getElementById('checkNo').onclick=function(){
// 获取所有的复选框
var checkElements=document.getElementsByName('items');
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
// 方法一火狐不支持
// checkElement.setAttribute('checked',null);
// 方法二 火狐和ie都支持
checkElement.checked=null;
}
}
/******************************************************************/
//反选
document.getElementById('checkReverse').onclick=function(){
// 获取所有的复选框
var checkElements=document.getElementsByName('items');
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
if (checkElement.checked) {
checkElement.checked=null;
}
else{
checkElement.checked="checked";
}
// 方法一
// checkElement.setAttribute('checked',null);
// 方法二 火狐和ie都支持
}
}
/***********************************************************/
//全选/不选
document.getElementById('checkItems').onclick=function()
{
// 获取所有的复选框
var checkElements=document.getElementsByName('items');
if (this.checked) {
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
checkElement.checked="checked";
}
}
else{
for(var i=0;i<checkElements.length;i++){
var checkElement=checkElements[i];
checkElement.checked=null;
}
}
}</script>
这里的代码实现了两个比较实用的功能，其一是文本框的默认内容改变，这涉及到了CheckBox事件；其二是将选项全选，全不选，反选，这里应用到了for循环以及点击事件处理，让用户更加体验的方便快捷。
如果有何处不懂，代码有注释，还有不懂的话可以私我，谢谢合作。