实现全选、反选的jquery

	//选中所有或反选所有的checkbox事件
	//调用方法时，传入当前checkbox状态
	function selectAll(checkedValue){
		$(".checkChildren").prop("checked",checkedValue);	
	}
	
	//当一个个点 子checkbox 的时候，检验全选的checkbox是否需要选中或取消
	function docheck(){
		if(!$(".checkChildren").checked){
			$("#selectAll").prop("checked",false);
		}
		//所有的 子checkbox 的总个数
		var chsub = $(".checkChildren").length;
		//被选中的 子checkbox 的个数
		var checkedsub = $("input[type='checkbox'][class='checkChildren']:checked").length;
		
		if(checkedsub == chsub){
			$("#selectAll").prop("checked",true);
		}
	}

jQuery从1.6版本开始，checked属性在也页面初始化的时候已经初始化好，不会随状态改变而改变。

一开始是选中，则永远是checked
一开始未选中，则永远是undefined

但jQuery使用.prop()解决了此问题：

alert($("#checkbox_all").prop("checked"));
//结果才是true或者false
//使用attr只会是checked或者undefined

做这个功能的时候，发现按钮没有效果，经过更改，将function selectAll的名字改掉即可生效，猜测应该是占用保留字的缘故。因此下面附完整JSP代码。


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>用户列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/pageCommon.js" charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/PageUtils.js" charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/script/DemoData.js" charset="utf-8"></script>
	<script language="javascript" src="${pageContext.request.contextPath}/script/DataShowManager.js" charset="utf-8"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/pageCommon.css" />
    <script type="text/javascript">
    
    function xuanze(ck){
		$(".checkChildren").prop("checked", ck);
	}
	 
    function docheck(){
    	if (!$(".checkChildren").checked) {  
            $("#selectAll").prop("checked", false);  
        }  
        var chsub = $(".checkChildren").length; //获取subcheck的个数  
        var checkedsub = $("input[type='checkbox'][class='checkChildren']:checked").length; //获取选中的subcheck的个数  
        if (checkedsub == chsub) {  
            $("#selectAll").prop("checked", true);  
        }  
    } 
    </script>
    
   
</head>
<body>
<div id="Title_bar">
    <div id="Title_bar_Head"> 
        <div id="Title_Head"></div>
        <div id="Title"><!--页面标题-->
            <img border="0" width="13" height="13" src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 用户管理
        </div>
        <div id="Title_End"></div>
    </div>
</div>

<div id="MainArea">
        <!-- 条件查询 -->
        
        	<form action="${pageContext.request.contextPath}/user/find" method="post">
            	用户名：<input name="findName"/>
            	状&nbsp;态：<input name="findStatus"/>
            	<input type="submit" value="搜索"/>
        	</form>
        	<form action="${pageContext.request.contextPath}/user/del" method="post">
	    		<input type="submit" value="删除"/>
        	 <table cellspacing="0" cellpadding="0" class="TableStyle">
<%-- 	       	 <button onclick="window.location.href = '${pageContext.request.contextPath}/user/del'"> 删除--%>
	    <!-- 条件查询 -->
            <tr align=center valign=middle id=TableTitle>
                <td width="100">登录名</td>
                <td width="100">密码</td>
                <td width="100">用户名</td>
                <td width="80">状态</td>
                <td width="250">创建时间</td>
                <td width="100">修改</td>
                <td>全选<input type="checkbox" onclick="xuanze(this.checked)" id="selectAll"/></td>
            </tr>
        <!--显示数据列表-->
        	<tbody id="TableData" >
        
         	<c:forEach items="${pageBean.recordList}" var="s">
              <tr class="TableDetail1 template">
                <td>${s.loginname}&nbsp;</td>
                <td>${s.password }&nbsp;</td>
                <td>${s.username }&nbsp;</td>
                <td>${s.status }&nbsp;</td>
                <td>${s.createdate }&nbsp;</td>
                <td><a href="${pageContext.request.contextPath}/user/updateUI?id=${s.id}">修改</a>&nbsp;</td>
                <td><input type="checkbox" name="deleteArray"  value="${s.id}"  class="checkChildren" onclick="docheck()">&nbsp;</td>
         	</c:forEach>
         	</tbody>
	    </table>
	    </form>
</div>

	<div id=PageSelectorMemo>
		页次：${pageBean.currentPage}/${pageBean.pageCount }页 &nbsp;
		每页显示：${pageBean.pageSize }条 &nbsp;
		总记录数：${pageBean.recordCount }条
	</div>
		<a href="javascript: gotoPage(1)" title="首页" style="cursor: hand;">
			<img src="${pageContext.request.contextPath}/style/blue/images/pageSelector/firstPage.png"/>
		</a>
		<c:forEach begin="${pageBean.beginPageIndex }" end="${pageBean.endPageIndex }" var="num">
			${num }
		</c:forEach>
		<a href="javascript: gotoPage(${pageBean.pageCount})" title="尾页" style="cursor: hand;">
			<img src="${pageContext.request.contextPath}/style/blue/images/pageSelector/lastPage.png"/>
		</a>
<script type="text/javascript">
	function gotoPage(pageNum ){
		window.location.href = "${pageContext.request.contextPath}/user/show?currentPage=" + pageNum;
	}
 </script>

</body>
</html>

实现全选、反选的jquery

但jQuery使用.prop()解决了此问题：

猜你喜欢