javaScript-复选框[全选][单选]分开实现
日期：2014-05-16 浏览次数：20409 次
javaScript-复选框[全选][单选]分离实现
命名此文件为:test.js
测试例子
命名此文件为: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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
