javascript 全選/反選,取消選擇效果

2019-11-21 00:32:18

字體：大中小

來源：轉載

供稿：網友

其實這個效果不難做。

難做的是如何讓用戶使用起來方便。

第一個checkbox實現了全選反選

最后個checkbox實現了取消選擇

這里只是做一個 JS實例罷了。

這段HTML并沒有實際的價值。

<!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>javascript 全選/反選效果。</title> </head> <body> <form id="form1id"> <table width="100%" border="1" style="border:1px solid #CCC;" cellspacing="0" cellpadding="0"> <th bgcolor="#CCCCCC"><input type="checkbox" title="全選/反選" /></th> <th bgcolor="#CCCCCC">標題</th> <th bgcolor="#CCCCCC">時間</th> <tr> <td><input type="checkbox" /></td> <td>武林網</td> <td>2010-02-02</td> </tr> <tr> <td><input type="checkbox" /></td> <td>武林網</td> <td>2010-02-02</td> </tr> <tr> <td><input type="checkbox" /></td> <td>武林網</td> <td>2010-02-02</td> </tr> <tr> <td><input type="checkbox" /></td> <td>武林網</td> <td>2010-02-02</td> </tr> <tr> <td align="center"><input type="checkbox" title="取消選擇" /></td> <td> </td> <td> </td> </tr> </table> </form> <script type="text/javascript"> var $=function(id){return document.getElementById(id);}; var myapp=(function(){ var forminput=$("form1id").getElementsByTagName("input"), i=0, checkbox=[]; for( i ; i < forminput.length ; i++ ){ if(forminput[i].type==="checkbox"){ checkbox.push(forminput[i]); } } checkbox[0].onclick=function(){myapp.selall(true);} checkbox[checkbox.length-1].onclick=function(){checkbox[0].checked=false;myapp.selall(false);} return { selall:function(){ //checkbox[0].checked=!arguments[0]; for(i=1;i<checkbox.length;i++){ checkbox[i].checked = (arguments[0]?!checkbox[i].checked:false) ? "checked" : false; } } }; })(); </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：JavaScript 正在上傳功能提示效果代碼

下一篇：IE JS無提示關閉窗口不提示的方法