javaScript-复选框[全选][单选]分开实现-JavaSript-爱易网页

javaScript-复选框[全选][单选]分开实现

日期：2014-05-16　浏览次数：20434 次

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" class="main">
            <table border="1" class="form_table" border="0" cellspacing="0" cellpadding="0">
              	<tr>
              		<th class="list_first_first_left"><input type="checkbox" name="flag_all" selected="true"/>全选</th>
              	</tr>
              	<tr>
              		<td class="list_nofirst_first_left"><input type="checkbox" name="selected" /></td>
              	</tr>
              	<tr>
              		<td class="list_nofirst_first_left"><input type="checkbox" name="selected"/></td>
              	</tr>
              	<tr>
              		<td class="list_nofirst_first_left"><input type="checkbox" name="selected"/></td>
              	</tr>
            </table>
        </div>
//引入javascript
<script type="text/javascript" src="test.js"></script>
</body>


---高分离度---
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javaScript-复选框[全选][单选]分开实现

相关资料更多>

推荐阅读更多>