jQuery如何实现复选框的全选、不选、反选功能?

复选框一个一个地选择,是不是很繁琐?而且用户体验也不好!那么就用jquery去实现复选框全选、反选、不选的功能吧

一般复选框的全选功能用在后台对数据的操作上比较多,比如批量删除数据等。

jquery复选框全选、不选、反选效果
jquery复选框全选、不选、反选效果

假设HTML结构:

  1. <table>   
  2.     <tr><td colspan="2">
  3. <input type="checkbox" id="checkAll" />全选
  4. <input type="checkbox" id="checkNo" />全不选
  5. <input type="checkbox" id="checkChange" />反选
  6. </td>
  7. </tr>   
  8.     <tr><th> </th><th>标题/title</th></tr>   
  9.     <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr>   
  10.     <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr>   
  11.     <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr>   
  12.     <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr>   
  13.     <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr>   
  14.     <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr>   
  15.     <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr>   
  16.     <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr>   
  17. </table> 

 jQuery实现代码:

  1. $(function(){ 
  2.     //全选 
  3.     $("#checkAll").click(function(){ 
  4.         //勾选自己,同类不勾选 
  5.         $(this).attr("checked",true).siblings().attr("checked",false); 
  6.         //查找并勾选同一祖先下的选框 
  7.         $(this).parents().siblings().find("input:checkbox").attr("checked","checked"); 
  8.     }) 
  9.     //不选 
  10.     $("#checkNo").click(function(){ 
  11.         //勾选自己,同类不勾 
  12.         $(this).attr("checked",true).siblings().attr("checked",false); 
  13.         //查找不勾选同一祖先下的选框 
  14.         $(this).parents().attr("checked",false).siblings().find("input:checkbox").attr("checked",false); 
  15.     }) 
  16.     //反选 
  17.     $("#checkChange").click(function(){ 
  18.         //勾选自己,同类不勾 
  19.         $(this).attr("checked",true).siblings().attr("checked",false); 
  20.         //查找反选同一祖先下的选框(遍历) 
  21.         $(this).parents().attr("checked",false).siblings().find("input:checkbox").each(function(){ 
  22.             $(this).attr("checked",!$(this).attr("checked")) 
  23.         }) 
  24.     }) 
  25. }) 

 

说明:不仅适合html里的table结构,也适合其它结构,比如li标签,只要它们都在一个父容器里面就能找到复选框,从而实现全选、返现、不选的效果!

如有疑问,欢迎在线留言!

 

相关经验

导读书签
书签初始化中…