checkbox的全选操作

来源：互联网发布：php implode join 编辑：程序博客网时间：2024/04/30 05:35
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>用户列表</title><script language="javascript">/*** 根据name获取元素*/function $n(name) {return document.getElementsByName(name);}/*** 选中所有*/function checkAll() {var a = $n("allCheck");var b=$n("check1");for(i=0;i<b.length;i++) {if(b[i].type=="checkbox") {b[i].checked=a[0].checked;}}}</script><style type="text/css">table {border:1px solid #2B91D5;border-spacing: 0px;}.bgtr {background-image:url(images/panel_title.gif);}.eventr {background-color:#DEDEDE;}</style></head><body><div style="margin-left:5%; margin-top:20px;">用户列表<img src="images\add.png" title="添加" /><img src="images\cancel.png" title="删除" /><img src="images\load.png" title="刷新" /><img src="images\help.png" title="帮助" /></div><table border="1" width="90%" align="center"><tr align="center" style="font-weight:bold;" class="bgtr"><td><input type="checkbox" name="allCheck" onClick="checkAll()"/></td><td>编号</td><td>用户名</td><td>电话</td><td>邮箱</td><td>角色</td><td>所属组</td><td>状态</td><td>操作</td></tr><tr><td><input type="checkbox" name="check1"/></td><td>001</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr class="eventr"><td><input type="checkbox" name="check1"/></td><td>002</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr><td><input type="checkbox" name="check1"/></td><td>003</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr class="eventr"><td><input type="checkbox" name="check1"/></td><td>004</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr><td><input type="checkbox" name="check1"/></td><td>005</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr class="eventr"><td><input type="checkbox" name="check1"/></td><td>006</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr><td><input type="checkbox" name="check1"/></td><td>007</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr class="eventr"><td><input type="checkbox" name="check1"/></td><td>008</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr><td><input type="checkbox" name="check1"/></td><td>009</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr class="eventr"><td><input type="checkbox" name="check1"/></td><td>010</td><td>张三</td><td>12345678912</td><td>8888@qq.com</td><td>牧师，法师，药师</td><td>开发1组，开发2组</td><td>正常</td><td><img src="images\search.png" title="查看" /><img src="images\pencil.png" title="修改" /><img src="images\cancel.png" title="删除" /></td></tr><tr class="bgtr"><td colspan="9">当前第 2/3 页<img src="images\first.gif" title="第一页" /><img src="images\prev.gif" title="上一页" /><input type="text" name="page" value="2" size="3"/><img src="images\next.gif" title="下一页" /><img src="images\last.gif" title="最后一页" /></td></tr></table></body></html>
主要功能就是点击最上边的那个checkbox，下边的所有checkbox都能选中，当然也可全不选。
主要实现代码是在最上边的 function checkAll() 函数。