“全选”，“反选”功能的实现。



2011-07-21 15:24 by Rollen Holt, 498 阅读, 0 评论, 收藏 , 编辑

假如一开始：

点击反选之后：

点击全选之后：

点击提交之后

源代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

<! 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=utf-8" />   < title ></ title >     <!--   引入jQuery -->     < script src="../scripts/jquery-1.3.1.js" type="text/javascript"></ script >     < script type="text/javascript">      $(function(){         //全选         $("#CheckedAll").click(function(){             $('[name=items]:checkbox').attr('checked', true);         });         //全不选         $("#CheckedNo").click(function(){            $('[type=checkbox]:checkbox').attr('checked', false);         });         //反选         $("#CheckedRev").click(function(){              $('[name=items]:checkbox').each(function(){                //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。                //$(this).attr("checked", !$(this).attr("checked"));                                //直接使用JS原生代码，简单实用                this.checked=!this.checked;              });         });         //输出值        $("#send").click(function(){            var str="你选中的是：\r\n";            $('[name=items]:checkbox:checked').each(function(){                str+=$(this).val()+"\r\n";            })            alert(str);        });      })          </ script >   </ head >   < body >   < form method="post" action="">       你爱好的运动是？       < br />        < input type="checkbox" name="items" value="足球"/>足球        < input type="checkbox" name="items" value="篮球"/>篮球        < input type="checkbox" name="items" value="羽毛球"/>羽毛球        < input type="checkbox" name="items" value="乒乓球"/>乒乓球       < br />        < input type="button" id="CheckedAll" value="全　选"/>        < input type="button" id="CheckedNo" value="全不选"/>        < input type="button" id="CheckedRev" value="反　选"/>            < input type="button" id="send" value="提　交"/>   </ form >   </ body >   </ html >

==============================================================================
我喜欢程序员，他们单纯、固执、容易体会到成就感；面对压力，能够挑灯夜战不眠不休；面对困难，能够迎难而上挑战自我。他
们也会感到困惑与傍徨，但每个程序员的心中都有一个比尔盖茨或是乔布斯的梦想“用智慧开创属于自己的事业”。我想说的是，其
实我是一个程序员
==============================================================================