首页 > 代码库 > jquery checkbox选框操作

jquery checkbox选框操作

2024-07-09 17:45:36   220人阅读

 

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3   <head> 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 6   </head> 7   <body> 8     <table border="1" align="center"> 9         <tr>10             <th>状态</th>11             <th>用户名</th>12         </tr>13         <tr>14             <td><input type="checkbox"/></td>15             <td>赵</td>16         </tr>17         <tr>18             <td><input type="checkbox"/></td>19             <td>钱</td>20         </tr>        21         <tr>22             <td><input type="checkbox"/></td>23             <td>孙</td>24         </tr>    25         <tr>26             <td><input type="checkbox"/></td>27             <td>李</td>28         </tr>29         <tr>30             <td><input type="checkbox"/></td>31             <td>周</td>32         </tr>    33         <tr>34             <td><input type="button" value="全选中"/></td>35             <td><input type="button" value="全取消"/></td>36             <td><input type="button" value="全反选"/></td>37         </tr>        38     </table>39     <script type="text/javascript">40         //页面加载时，将全取消按钮失效41         window.onload = function(){42             $(":button:eq(1)").attr("disabled","disabled");43         }44         //全选中45         $(":button:eq(0)").click(function(){46             //所有复选框设置为选中状态47             $(":checkbox").attr("checked","checked");48             //将该按钮失效49             $(this).attr("disabled","disabled");50             //将全取消按钮生效51             $(":button:eq(1)").removeAttr("disabled");52         });53         //全取消54         $(":button:eq(1)").click(function(){55             //所有选中的复选框删除选中属性56             $(":checkbox:checked").removeAttr("checked");57             //将该按钮失效58             $(this).attr("disabled","disabled");59             //将全选中按钮生效60             $(":button:eq(0)").removeAttr("disabled");61         });62         //全反选63         $(":button:eq(2)").click(function(){64             65             //将选中的失效66             $(":checkbox:checked").attr("disabled","disabled");67             68             //将未选中的选中69             $(":checkbox:not(:checked)").attr("checked","checked");70             71             //将失效的生效，同时删除选中属性72             $(":checkbox:disabled").removeAttr("disabled").removeAttr("checked");            73 74         });75     </script>76   </body>77 </html>

 

全反选或者

 1     $(":button:eq(2)").click(function(){ 2         $(":checkbox").each(function(){ 3             if($(this).attr("checked")!=null) 4             { 5                 $(this).removeAttr("checked"); 6             } 7             else 8             { 9                 $(this).attr("checked","checked");10             }11         });12         13     });

 


联系
我们