一般复选框的全选功能用在后台对数据的操作上比较多,比如批量删除数据等。
jquery复选框全选、不选、反选效果
假设html结构:
<table> <tr><td colspan="2"><input type="checkbox" id="checkall" />全选<input type="checkbox" id="checkno" />全不选<input type="checkbox" id="checkchange" />反选</td></tr> <tr><th> </th><th>标题/title</th></tr> <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr> <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr> <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr> <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr> <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr> <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr> <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr> <tr><td><input type="checkbox" /></td><td>数据标题数据标题数据标题数据标题数据标题</td></tr> </table>
jquery实现代码:
$(function(){ //全选 $("#checkall").click(function(){ //勾选自己,同类不勾选 $(this).attr("checked",true).siblings().attr("checked",false); //查找并勾选同一祖先下的选框 $(this).parents().siblings().find("input:checkbox").attr("checked","checked"); }) //不选 $("#checkno").click(function(){ //勾选自己,同类不勾 $(this).attr("checked",true).siblings().attr("checked",false); //查找不勾选同一祖先下的选框 $(this).parents().attr("checked",false).siblings().find("input:checkbox").attr("checked",false); }) //反选 $("#checkchange").click(function(){ //勾选自己,同类不勾 $(this).attr("checked",true).siblings().attr("checked",false); //查找反选同一祖先下的选框(遍历) $(this).parents().attr("checked",false).siblings().find("input:checkbox").each(function(){ $(this).attr("checked",!$(this).attr("checked")) }) }) })
说明:不仅适合html里的table结构,也适合其它结构,比如li标签,只要它们都在一个父容器里面就能找到复选框,从而实现全选、返现、不选的效果!