jquery实现全选的功能非常简单,这里这个例子主要是介绍一下jquery的attr和removeAttr两个方法的应用。这里有两个jquery实现全选的方法,都通过了测试,把以下的代码保存为html文件,双击打开就可以看到效果了,测试一个写法是否正确,需要把另一个写法的代码注释掉,使用/* */来注释。
<script src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function () { //写法一 //全选或全不选 /*$("#chkAll").click(function () {//当点击全选框时 var flag = $("#chkAll").attr("checked");//判断全选按钮的状态 $("[name='Item']").each(function(){ $(this).attr("checked",flag); }); }); */ //写法二 $("#chkAll").click(function () {//当点击全选框时 var flag = $("#chkAll").attr("checked");//判断全选按钮的状态 $("[name='Item']").each(function(){ if(flag) { $(this).attr("checked","checked"); //设置选中 } else { $(this).removeAttr("checked"); //去掉选中 } }); }); }); </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="200" border="1"> <tr> <td><input type="checkbox" name="Item" id="chkAll" /> 全选 </td> <td>内容</td> </tr> <tr> <td><input type="checkbox" name="Item" id="checkbox2" /> 1</td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="Item" id="checkbox3" /> 2</td> <td>2</td> </tr> <tr> <td><input type="checkbox" name="Item" id="checkbox3" /> 3</td> <td>3</td> </tr> <tr> <td><input type="checkbox" name="Item" id="checkbox3" /> 4</td> <td>4</td> </tr> <tr> <td><input type="checkbox" name="Item" id="checkbox3" /> 5</td> <td>5</td> </tr> <tr> <td><input type="checkbox" name="Item" id="checkbox3" /> 6</td> <td>6</td> </tr> <tr> <td><input type="checkbox" name="Item" id="checkbox3" /> 7</td> <td>7</td> </tr> </table> </form>(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)