基础——Jquery制作全选和反选

Jquery代码

Jquery代码 
 1 <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 2  <script type="text/javascript">
 3     function Checked(){        //定义函数checked
 4         $(".chk").each(function(){        //遍历html中class为chk的复选框标签
 5             if($(this).attr("checked") == true){    //如果当前复选框的checked属性为true
 6                 $(this).attr("checked",false);        //将该属性改为false
 7             }
 8             else{                                    //如果当前复选框的checked属性为false
 9                 $(this).attr("checked",true);        //将该属性改为true
10             }
11         });
12         if($("#lbl").html() == "全选"){        //修改label的文本为“反选”
13             $("#lbl").html("反选");    
14         }
15         else if($("#lbl").html() == "反选"){ //修改label的文本为“全选”
16             $("#lbl").html("全选");
17         }
18     }
19     $(document).ready(function(){        //为label添加click事件执行函数checked
20         $("#lbl").bind("click",Checked);
21     })
22 </script>
Html代码

HTML代码 
 1 <label id="lbl">全选</label>
 2 <table>
 3     <tr>
 4         <td>
 5             <input type="checkbox" class="chk" />
 6         </td>
 7     </tr>
 8     <tr>
 9         <td>
10             <input type="checkbox" class="chk" />
11         </td>
12     </tr>
13     <tr>
14         <td>
15             <input type="checkbox" class="chk" />
16         </td>
17     </tr>
18     <tr>
19         <td>
20             <input type="checkbox" class="chk" />
21         </td>
22     </tr>
23     <tr>
24         <td>
25             <input type="checkbox" class="chk" />
26         </td>
27     </tr>
28 </table>

 

posted on 2010-03-24 23:43  donliu  阅读(397)  评论(1)  编辑  收藏  举报

导航