这几天闲来无事，回顾了下以前的代码练习，发现还有许多应用得上的，这里便将其发出来，仅供参考
<!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').οnclick=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').οnclick=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').οnclick=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').οnclick=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循环以及点击事件处理，让用户更加体验的方便快捷。
如果有何处不懂，代码有注释，还有不懂的话可以私我，谢谢合作。