JQuery全选反选 随其他checkbox自动勾选全选反选

工作中的代码片段 写出来留作以后对比参考

网上没找到自己想要的全选反选代码 干脆自己写了个比较臃肿的 相信还有更加简单的方法

jquery代码

===================================================

$(document).ready(function() {//当页面加载完成时

$("#select_all").click(function() {//当点击全选的checkbox时

if ($("#select_all").attr("checked")) {//如果全选的checkbox为选中状态时

$(".main-body .layout-right .huati02 table input").attr("checked", "checked");//其他的checkbox全部勾选

}

else {//如果全选的checkbox为选非中状态时

$(".main-body .layout-right .huati02 table input").attr("checked", "");//其他的checkbox全部取消勾选

}

});

$(".main-body .layout-right .huati02 table input").click(function() {//当其他的checkbox发生鼠标点击时

var result = 0;//声明一个表示结果的变量

$(".main-body .layout-right .huati02 table input").each(function() {//遍历其他的checkbox

if ($(this).attr("checked") == false) {//如果其中有没选中的checkbox

result += 1;//结果+1

}

});

if (result == 0) {//如果结果等于0表示所有的checkbox都已经勾选

$("#select_all").attr("checked", "checked");//全选的checkbox自动勾选

result = 0;//为变量重置原始值

}

else {//如果结果不等于0表示还有checkbox没有勾选

$("#select_all").attr("checked", "");//全选的checkbox不勾选

result = 0;//为变量重置原始值

}

});

});

HTML代码片段 直接拷贝过来的项目源代码 懒得精简了

====================================================

<table width="698" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="20" align="center" valign="middle" bgcolor="#ebebeb" class="tb-title">&nbsp;</td>

<td width="75" height="35" align="center" bgcolor="#ebebeb" class="tb-title">作者</td>

<td width="380" height="35" align="center" bgcolor="#ebebeb" class="tb-title">标题</td>

<td width="123" height="35" align="center" bgcolor="#ebebeb" class="tb-title">回复/查看</td>

<td width="100" height="35" bgcolor="#ebebeb" class="tb-title">最后回复</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 </a><span class="top">[顶置]</span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">今天 11：11</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a class="green" href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 </a>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">昨天 12：12</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="jewel"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="new"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

<tr>

<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>

<td width="75" height="75" align="center" style="padding-left:0;">

<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>

</td>

<td class="hid" valign="top" width="380" height="75">

<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>

<br />

<a class="username" href="" target="_blank">username </a><span class="date">-11-13</span>

</td>

<td width="123" height="75" align="center">1/12</td>

<td width="100" height="75">8-11 13：13</td>

</tr>

</table>

<div class="all">

<input id="select_all" type="checkbox" /><label for="select_all" >全选</label>

<span>批量管理：</span> <a href="javascript:void(0)">推荐给衣酷</a> <a href="javascript:void(0)">置顶/解除置顶</a> <a href="javascript:void(0)">加亮</a> <a href="javascript:void(0)">锁定/解除锁定</a> <a href="javascript:void(0)">删除</a>

</div>

CSS代码就不放上来了 能预览效果就行了