jQuery学习(五)——使用JQ完成复选框的全选和全不选

时间：2023-03-08 22:06:26

1、在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选

步骤分析：

第一步：引入jquery文件

第二步：书写页面加载函数

第三步：为上面的复选框绑定单击事件

第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

2、具体代码实现：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>使用jQuery完成复选框的全选和全不选</title>

         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

         <script>

             $(function(){

                 $("#select").click(function(){

                     //获取下面所有的复选框并将其选中状态设置跟编码的前端复选框保持一致

                     //attr的方法与JQ的版本有关，在1.8.3及以下有用

                     //$(".selectOne").attr("checked",this.checked);

                     $(".selectOne").prop("checked",this.checked);

                 });

             });

         </script>

     </head>

     <body>

         <table border="1" width="500" height="50" align="center" id="tbl" >

             <thead>

                 <tr>

                     <td colspan="4">

                         <input type="button" value="添加" />

                         <input type="button" value="删除" />

                     </td>

                 </tr>

                 <tr>

                     <th><input type="checkbox" id="select"></th>

                     <th>编号</th>

                     <th>姓名</th>

                     <th>年龄</th>

                 </tr>

             </thead>

             <tbody>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>1</td>

                     <td>张三</td>

                     <td>22</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>2</td>

                     <td>李四</td>

                     <td>25</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>3</td>

                     <td>王五</td>

                     <td>27</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>4</td>

                     <td>赵六</td>

                     <td>29</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>5</td>

                     <td>田七</td>

                     <td>30</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" class="selectOne"/></td>

                     <td>6</td>

                     <td>汾九</td>

                     <td>20</td>

                 </tr>

             </tbody>

         </table>

     </body>

 </html>

注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。

相关文章