今天做了一个全选功能：
1.点击全选，全部选中。选中状态再点击全选，全部取消选中
2.点击成员，判断是否成员全部选中，true:全选为选中状态，false：全选为未选中状态。
使用js是比较麻烦的就是如何获取到成员对象集合，首先我们了解到获取控件的方法有几种：
1.document.getElementById("控件ID") 获取指定的控件，因为根据HTML规范中ID是具有唯一性的。注意：在获取ASP.Net控件的ID时，使用<%=控件ID.ClientID%>
2.document.getElementsByName("控件Name") 获取控件的集合，因为不同的控件可以设置同一个Name。注意：在获取ASP.Net控件的name时，我们却找不到我们设置的Name，原因是服务器控件在编译之后会生成HTML控件时会重新对控件ID和Name赋值。所以我们自己写的Name就没有起到作用了。
3.document.getElementsByTagName("Html的标签") 获取控件的集合。
由从上面分析可以得出：
1.能让服务器控件的Name能不自动生成，就可以使用document.getElementsByName()方法
2.就是使用document.getElementsByTagName("Html的标签")
因为document中没有根据Class获取控件的方法，我们就使用getElementsByTagName()方法创建一个根据Class获取控件的方法
function getElementsByClassName(className) {
var classElements = []
allElements = document.getElementsByTagName("*");
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].className == className) {
classElements[classElements.length] = allElements[i];
}
}
return classElements;
}
页面代码：
<table id="tblRole" cellpadding="0" cellspacing="0">
<tr>
<td style=" padding:0px; border:0px;">
<asp:CheckBox ID="chkAll" runat="server" Onclick="isChkAll(this,'chkAllSearchManager')" /></td>
<td style=" padding:0px; border:0px;">
<label for="<%=chkAll.ClientID %>">
全て</label></td>
<td style=" padding:0px; border:0px;">
<asp:CheckBox ID="chkResolution" CssClass="role" runat="server" /></td>
<td style=" padding:0px; border:0px;">
<label for="<%=chkResolution.ClientID %>">
決議者</label></td>
<td style=" padding:0px; border:0px;">
<asp:CheckBox ID="chkReview" Class="role" runat="server" /></td>
<td style=" padding:0px; border:0px;">
<label for="<%=chkReview.ClientID %>">
審議者</label></td>
<td style=" padding:0px; border:0px;">
<asp:CheckBox ID="chkPMO" CssClass="role" runat="server" /></td>
<td style=" padding:0px; border:0px;">
<label for="<%=chkPMO.ClientID %>">
PMO</label></td>
<td style=" padding:0px; border:0px;">
<asp:CheckBox ID="chkOrganizer" CssClass="role" runat="server" /></td>
<td style=" padding:0px; border:0px;">
<label for="<%=chkOrganizer.ClientID %>">
主催者</label></td>
<td style=" padding:0px; border:0px;">
<asp:CheckBox ID="chkParties" CssClass="role" runat="server" /></td>
<td style=" padding:0px; border:0px;">
<label for="<%=chkParties.ClientID %>">
当事者</label></td>
<td style=" padding:0px; border:0px;">
<asp:CheckBox ID="chkParticipants" CssClass="role" runat="server" /></td>
<td style=" padding:0px; border:0px;">
<label for="<%=chkParticipants.ClientID %>">
参加者</label></td>
<td style=" padding:0px; border:0px;">
<asp:CheckBox ID="chkAllSearchManager" runat="server" ClientIDMode="Static" Onclick="isChkAll(this,'chkAllSearchManager')" /></td>
<td style=" padding:0px; border:0px;">
<label for="<%=chkAllSearchManager.ClientID %>">
管理者全件検索</label></td>
</tr>
</table>
获取到之后，我们想就应该很简单了，根据我们写的方法就可以找到了HTML控件了，然后对其做对应的操作。OK，代码：
function isChkAll(obj) {
var classRole = getElementsByClassName("role");
if (obj.checked) {
for (var i = 0; i < classRole.length; i++) {
classRole[i].checked = true;
}
}
else {
for (var i = 0; i < classRole.length; i++) {
classRole[i].checked = false;
}
}
}
当我们真的运行时，发现成员checkbox都没反应，查看代码发现我们在checkbox中加的CSSClass被放入到span标签中了。
因为我们写的是ASP.Net控件，如果是HTML控件的话会很简单的。用getElementsByName()就解决了。
function isChkAll(obj, SearchManageid) {
var classRole = getElementsByClassName("role");
if (obj.checked) {
for (var i = 0; i < classRole.length; i++) {
classRole[i].getElementsByTagName("input")[0].checked = true;
}
}
else {
for (var i = 0; i < classRole.length; i++) {
classRole[i].getElementsByTagName("input")[0].checked = false;
}
}
}
所以要用classRole[i].getElementsByTagName("input")[0]替换classRole[i]，getElementsByTagName("input")获取的是含有input标签的HTML标签集合，所以要给它加下标。
上面说的那么多主要是用于点击全选的checkbox，下面说的是点击成员的checkbox。
function chkRoles(objAll) {
var roles = getElementsByClassName("role");
var isCheck = false;
var isNotCheck = false;
for (var i = 0; i < roles.length; i++) {
if (roles[i].getElementsByTagName("input")[0].checked) {
isCheck = true;
}
else {
isNotCheck = true;
}
}
if (isCheck == true) {
if (isNotCheck == false) {
objAll.checked = true;
}
else {
objAll.checked = false;
}
}
}
上面的代码效果：成员全部选中，全选checkbox为选中状态，成员有一个没选中，全选checkbox为未选中状态。方法写好了，现在我们就要把这个方法放到成员checkbox的onclick事件上去。
注册事件的方法有很多种，但大方向应该分为有参数和无参数的注册。
无参方法的注册就比较简单了
1.checkbox.onclick=cusclick;
2.checkbox.onclick=function(){}
3.checkbox.attachEvent('onclick', function(){alert('22');});//执行顺序按添加顺序的反序，先进后出
有参的方法注册：
1.checkbox.onclick=function(){chkRoles(objAll);}
2.checkbox.attachEvent('onclick', function(){chkRoles(objAll);});//执行顺序按添加顺序的反序，先进后出
页面代码：
window.onload = function () {
init();
}
function init() {
var roles = getElementsByClassName("role");
var objAll = document.getElementById("<%=chkAll.ClientID %>");
var objchkSearchManage = document.getElementById("chkAllSearchManager");
for (var i = 0; i < roles.length; i++) {
roles[i].getElementsByTagName("input")[0].onclick = function () {
chkRoles(objAll, objchkSearchManage);
}
//roles[i].getElementsByTagName("input")[0].attachEvent("onclick", chkRoles(objAll, objchkSearchManage));
}
}