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



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

假如一开始：

点击反选之后：

点击全选之后：

点击提交之后

源代码如下：

<! 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 >

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