工作中的代码片段 写出来留作以后对比参考
网上没找到自己想要的全选反选代码 干脆自己写了个比较臃肿的 相信还有更加简单的方法
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"> </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">2009-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">2009-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">2009-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">2009-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">2009-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">2009-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">2009-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">2009-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">2009-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">2009-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">2009-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">2009-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">2009-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代码就不放上来了 能预览效果就行了