javaScript-复选框[全选][单选]分离实现命名此文件为:test.js/**复选框[全选][单选]要使用次javaScript代
javaScript-复选框[全选][单选]分离实现
命名此文件为:test.js
/** 复选框[全选][单选] 要使用次javaScript代码请先修改下面变量 checkNameSpace=[所有]checkbox所在的最近一层标签ID checkAllName = 全选checkbox的name值 Author:Rong4It Date:2010-09-28 Declare:[别瞎改就中] */ var checkNameSpaceId = "main"; var checkAllName="flag_all"; var input= document.getElementById(checkNameSpaceId).getElementsByTagName("input"); var checkboxArr = new Array(); var checkboxCount=0; var checkAll;//全选按钮 for(var i=0 ;i<input.length;i++){ if(input.item(i).getAttribute("type")=="checkbox"){ if(input.item(i).getAttribute("name")==checkAllName) checkAll=input.item(i); else{ checkboxArr[checkboxCount]=input.item(i); checkboxCount++ ; } } } /** 为全选按钮添加事件 */ checkAll.onclick = function(){ for(var i=0 ;i<checkboxArr.length;i++){ checkboxArr[i].checked = checkAll.checked; checkboxArr[i].style.cursor="pointer"; } } /** 为其他复选框添加按钮 */ for(var i=0 ;i<checkboxArr.length;i++){ checkboxArr[i].onclick = function(){ var flag = true; for(var j=0 ;j<checkboxArr.length;j++){ if(checkboxArr[j].checked == false) flag = false; } checkAll.checked = flag; } } checkAll.style.cursor="pointer";测试例子
<!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>test</title></head><body><div id="main" border="0" cellspacing="0" cellpadding="0"> <tr> <th name="flag_all" selected="true"/>全选</th> </tr> <tr> <td name="selected" /></td> </tr> <tr> <td name="selected"/></td> </tr> <tr> <td name="selected"/></td> </tr> </table> </div>//引入javascript<script type="text/javascript" src="test.js"></script></body>---高分离度---</html>