基础——Jquery制作全选和反选
Jquery代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
O(∩_∩)O每天进步一点点O(∩_∩)O
该BLOG供个人记录学习笔记,如有错误欢迎指出!