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">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代码就不放上来了 能预览效果就行了