In fact, this effect is not difficult to do.
The hard part is how to make the user easy to use.
The first checkbox implements a select-and-Select
The last checkbox implements the cancel selection
Here just do a JS example.
There is no real value in this piece of HTML.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>javascript Select/Reverse selection effect. </title> </pead> <body> <form id= "Form1id" > <table width= "100%" border= "1" cellspacing= "0" cellpadding= "0" > <th bgcolor= "#CCCCCC" ><input type= "checkbox" title= "Select All/Reverse"/></th> <th Bgcolor= "#CCCCCC" > title </th> <th bgcolor= "#CCCCCC" > Time </th> <tr> <td><input type= " CheckBox "/></td> <td> Cloud Community </td> <td>2010-02-02</td> </tr> <tr> <TD&G T;<input type= "checkbox"/></td> <td> Cloud Habitat </td> <td>2010-02-02</td> </tr> & lt;tr> <td><input type= "checkbox"/></td> <td> cloud-dwelling community </td> <TD≫2010-02-02</td> </tr> <tr> <td><input type= "checkbox"/></td> <td> cloud-Habitat Community & lt;/td> <td>2010-02-02</td> </tr> <tr> <td align= "center" ><input type= "checkbox" Title= "Cancel Selection"/></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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
