快捷導(dǎo)航

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

更新時(shí)間：2010年04月29日 12:51:11 作者：

剛才博客園的javascript首頁(yè)看到一個(gè)朋友的全選/反選效果。

其實(shí)這個(gè)效果不難做。

難做的是如何讓用戶使用起來(lái)方便。

第一個(gè)checkbox實(shí)現(xiàn)了全選反選

最后個(gè)checkbox實(shí)現(xiàn)了取消選擇

這里只是做一個(gè) JS實(shí)例罷了。

這段HTML并沒(méi)有實(shí)際的價(jià)值。

<!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">標(biāo)題</th> <th bgcolor="#CCCCCC">時(shí)間</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>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </form>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: