复选框批量操作之点击全选与反选

现在的位置: 首页＞JavaScript＞正文

上篇下篇

复选框批量操作之点击全选与反选

2010年06月01日 ⁄ JavaScript ⁄ 暂无评论 ⁄ 被围观 1,008+

复选框的操作在网站后台里面很常用，今天写了个关于复选框的全选和反选操作的JavaScript代码。
主要就是对元素的定位和表单标签的遍历，一个for循环就搞定了，话不多说，上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>复选框批量操之全选和反选作js优化版</title> <style type="text/css"> body{ font:12px Tahoma; padding:0; margin:0;} input,span,li,ul{padding:0; margin:0;} .content{ width:300px; margin:100px auto auto auto; text-align:center; vertical-align:middle; line-height:20px;} .content input{ vertical-align:middle;} .tablenav1{ background-color:#E8E8E8;} .tablenav1 td{ border:1px #FFF solid;} </style> <script language="javascript" type="text/javascript"> function chickall(thisbox){ var checktag = document.getElementById("checks").getElementsByTagName("input"); for (var i=0;i<checktag.length;i++){ if (checktag[i].type == 'checkbox'){ //指定input的具体对象，这儿也可以使用checktag[i].name if (thisbox.checked == true){ checktag[i].checked = true; } else{ checktag[i].checked = false; } } } } function chickfan(thisbox){ var checktag = document.getElementById("checks").getElementsByTagName("input"); for (var i=0;i<checktag.length;i++){ if (checktag[i].type == 'checkbox'){ if (checktag[i].checked == false){ checktag[i].checked = true; } else{ checktag[i].checked = false; } } } } </script> </head> <body> <div class="content"> <table width="100%" align="center" cellpadding="0" cellspacing="0" style="border:1px #666 solid;" > <tr class="tablenav1"> <td width="52" height="20"><input name="" type="checkbox" value="" onclick="chickall(this)" id="chickallbox"> 全选</td> <td width="47">编号</td> <td width="199">标题</td> </tr> <tr> <td colspan="3"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="checks"> <tr> <td width="50"><input name="chicklist" type="checkbox" value="" /></td> <td width="40">1</td> <td>又不是选美你选我搞啥子</td> </tr> <tr> <td><input name="chicklist" type="checkbox" value="" /></td> <td>2</td> <td>又不是选美你选我搞啥子</td> </tr> <tr> <td><input name="chicklist" type="checkbox" value="" /></td> <td>3</td> <td>又不是选美你选我搞啥子</td> </tr> </table> </td> </tr> <tr class="tablenav1"> <td width="52" height="20"><input name="" type="checkbox" value="" id="chickfan" onclick="chickfan()" /> 反选</td> <td width="47"> </td> <td> </td> </tr> </table> </div> </body> </html>

提示：你可以先修改部分代码再运行。