遍历集合中全选框和复选框选中事件

jsp页面:

<div class="border">
	<s:form name="form2" method="post" action="sysUserGroupAction_delete.do" namespace="/sys">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" id="PowerTable" class="PowerTable">
			<tr>
				<td width="5%" class="listViewThS1">
					<input type="checkbox" id="checkall" name="checkall" value="" 
							class="checkbox" onClick="checkAll()"></td>
				<td width="20%" class="listViewThS1">部门名称</td>
				<td width="15%" class="listViewThS1">部门负责人</td>
				<td width="50%" class="listViewThS1">部门职能</td>
				<td width="10%" class="listViewThS1">人员设置</td>
			</tr>
			<s:if test="#request.sysUserGroups != null">
				<s:iterator var="sysUserGroup" value="%{#request.sysUserGroups}">
					<tr>
						<td><input type="checkbox" name="ids" value="12" class="checkbox" onClick="changeCheckCount();"></td>
						<td>
							<a href="${pageContext.request.contextPath}/sys/sysUserGroupAction_edit.do?id=<s:property value="#sysUserGroup.id"/>">
								<s:property value="#sysUserGroup.name"/>
							</a>
						</td>
						<td>
							<s:property value="#sysUserGroup.principal"/>
						</td>
						<td>
							<s:property value="#sysUserGroup.incumbent"/>
						</td>
						<td>
							<a href="javascript:OpenWin('${pageContext.request.contextPath}/sys/group/usersInGroup.jsp?id=12')">设置</a>
						</td>
					</tr>
				</s:iterator>
			</s:if>
			<s:else>没有任何用户信息!</s:else>
		</table>
	</s:form>
</div>

JS代码:

<script type="text/javascript">
	// 遍历的每一个复选框
	function changeCheckCount() {
		var count = 0;	// 声明一个变量
		// 所有name属性为ids的复选框, 即所有被遍历的复选框; index:复选框的序号, 从0开始; 
		// data:每一个复选框对象, data.value:每一个复选框对象的value值
		$("input[type='checkbox'][name='ids']").each(function(index, data) {
			if (this.checked) {		// 当前复选框被选中
				count++;			// 数量+1
			}
		});
		if (count == $("input[type='checkbox'][name='ids']").length) {	// 数量等于被遍历的复选框数目, 即全选了
			$("#checkall").attr("checked", "checked");	// 全选复选框被选中
		} else {
			$("#checkall").attr("checked", null);	// 否则没有被选中
		}
	}

	// 全选框
	function checkAll() {
		if ($("#checkall")[0].checked) {	// 全选框被选中
			$("input[type='checkbox'][name='ids']").attr("checked", "checked");	// 所有复选框都被选中
		} else {
			$("input[type='checkbox'][name='ids']").attr("checked", null);	// 所有复选框都没被选中
		}
	}
</script>

页面效果: