jQuery复选框全选、不选、反选

来源：互联网发布：会计资格考试软件下载编辑：程序博客网时间：2024/06/04 18:18

jQuery复选框全选、不选、反选

特点：更注重用户体验；xhtml代码更简洁；更适合应用在后台数据编辑

$(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"))})})})

<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>

效果：