jquery实现checkbox全选全不选的简单实例

　　demo一：

复制代码代码如下:

　　<%@ page language="java" pageEncoding="UTF-8"%>

　　<%@ taglib prefix="s" uri="/struts-tags" %>

　　<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

　　<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

　　<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>

　　<%@ taglib uri="/WEB-INF/tlds/test.tld" prefix="pig"%>

　　String path = request.getContextPath();

　　String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path;

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<script type="text/javascript" src="<%=path %>/scripts/jquery.js"></script>

　　function checkSubmit() {

　　document.Search.submit();

　　}

　　function fnull(){

　　var obj = document.getElementById("goPage");

　　var index = obj.selectedIndex; // 选中索引

　　var text = obj.options[index].text; // 选中文本

　　var go = obj.options[index].value; // 选中值

　　//alert(go);

　　gopage(go);

　　}

　　function gopage(page){

　　var numberpg=document.getElementById("numberpg").value;

　　document.getElementById("prepage").value=numberpg;

　　document.getElementById("currPage").value=page;

　　checkSubmit();

　　}

　　function px(){

　　var numberpg=document.getElementById("numberpg").value;

　　gopage(1);

　　}

　　function driction(id){

　　document.s_result_form1.s_result_form1_id.value = id;

　　document.s_result_form1.submit();

　　}

　　$(function(){

　　$("td").css("height","22px");

　　$("#refresh").bind("click",function(){

　　//location.reload();

　　location="wlan!querySurveyWlan.do";

　　});

　　$(".dg_alternatingitemstyle").bind("mouseover",function(){

　　$(this).children().css("height","22px");

　　});

　　$(".dg_alternatingitemstyle").bind("mouseout",function(){

　　$(this).children().css("height","22px");

　　});

　　</script>

<!--

　　.f {

　　font-size: 12px;

　　}

　　-->

　　</style>

　　</head>

　　<tr>

　　<span>WLAN调查管理</span>

　　</th>

　　<input type="image" name="import" src="<%=path %>/themes/default/btn_sc.gif" onclick="deletes()" alt = "勾选批量删除"/>

　　</td>

　　<input type="image" name="export" src="<%=path %>/themes/default/btn_exp.gif"

　　onclick="window.location = 'wlan!hotExport.do'" alt = "导出"/>

　　</td>

　　<img id="refresh" src="<%=path %>/themes/default/btn_sx.gif" width="50" height="20" alt = "刷新"/>

　　</td>

　　</tr>

　　</table>

　　<form action="wlan!querySurveyWlan.do" method="post" onsubmit="return false;"

　　name="Search" id="Search">

　　<tr>

　　<td>

　　<s:select list="typeMap" name="msgType" value="msgType" theme="simple"/>

　　</td>

　　<td>

　　<s:select list="areaMap" name="msgOnlineType" value="msgOnlineType" theme="simple"/>

　　</td>

　　</tr>

　　<tr>

　　<td>

　　</td>

　　<td>

　　</td>

　　<td style="text-align:left" colspan="2"><img style="width:50; height:20;

　　border:0; cursor: pointer;" onclick="checkSubmit()" src="<%=path %>/themes/default/btn_search.gif" /></td>

　　</tr>

　　</table>

　　</form>

　　</div>

　　<tr>

　　</tr>

　　<s:iterator value="surveyList" id="dto" status="sta">

　　<c:choose>

　　<c:when test="1==1">

　　</c:when>

　　<c:otherwise>

　　</c:otherwise>

　　</c:choose>

　　</td>

　　${dto.recmakedate}

　　</td>

　　${dto.type}

　　</td>

　　${dto.onlinetype}

　　</td>

　　${dto.mobileno}

　　</td>

　　${dto.address}

　　</td>

　　</tr>

　　</s:iterator>

　　</table>

　　<s:if test="surveyList.size>0">

　　<tr>

　　<th>第${currPage}页 | 共${countPage}页/${countNum}条记录</th>

　　<td>每页

　　<select id="numberpg" name="numberpg" onChange="px(this.options

　　[this.selectedIndex].value)">

　　<option <c:if test="${prepage==100}">selected="selected"</c:if>

　　value="100">100</option>

　　<option <c:if test="${prepage==300}">selected="selected"</c:if>

　　value="300">300</option>

　　<option <c:if test="${prepage==500}">selected="selected"</c:if>

　　value="500">500</option>

　　</select>

　　条记录 | 第

　　<s:iterator begin="1" end="countPage" status="stu">

　　<c:choose>

　　<c:when test="${stu.count==currPage}"><option value='${stu.count}' selected='selected'>${stu.count}</option></c:when>

　　<c:otherwise>

　　<option value="${stu.count}">${stu.count}</option>

　　</c:otherwise>

　　</c:choose>

　　</s:iterator>

　　</select>

页

　　<img border="0" src="<%=path %>/themes/default/btn_go.gif" />

　　</a>

　　<img border="0" src='<%=path %>/themes/default/btn_sy.gif'/>

　　</a>

　　<c:if test="${currPage!=1}">

　　<img border="0" src='<%=path %>/themes/default/btn_syy.gif'/>

　　</a>

　　</c:if>

　　<c:if test="${currPage!=countPage}">

　　<img border="0" src='<%=path %>/themes/default/btn_xyy.gif'/>

　　</a>

　　</c:if>

　　<img border="0" src='<%=path %>/themes/default/btn_wy.gif'/>

　　</a>

　　</td>

　　</tr>

　　</table>

　　</s:if>

　　<s:else>

　　<center>当前查询没有数据！</center>

　　</s:else>

　　</div>

　　</body>

　　</html>

　　$(function(){

　　});

　　function selectAll(){

　　var ck = $("input[name=ck]");

　　var currSelect = $("input[name=allSelect][checked]").val();

　　$.each(ck,function(i){

　　//alert(ck[i].disabled)

　　if(!ck[i].disabled){

　　ck[i].checked = currSelect;

　　}

　　});

　　}

　　function cancelCKSelect(){

　　var ck = $("input[name=ck]");

　　var r = true;

　　$.each(ck,function(i){

　　if(!ck[i].checked && !ck[i].disabled){

　　r=false;

　　return false;

　　}

　　});

　　$('#allSelect').attr('checked', r);

　　}

　　function deletes(){

　　var delId ="";

　　var ck = $("input[name=ck]");

　　$.each(ck,function(i){

　　if(ck[i].checked && !ck[i].disabled){

　　delId += "'"+$("#ckvalue"+i).val()+"',";

　　}

　　});

　　delId = delId.substring(0,delId.lastIndexOf(","));

　　if(delId != ""){

　　var flag = window.confirm("您确定删除吗?");

　　if(!flag){

　　return;

　　}

　　window.location= "wlan!hotDelete.do?hotWlanId="+delId;

　　}else{

　　alert('请选择需要删除的数据！');

　　}

　　</script>

　　demo二：

复制代码代码如下:

　　<input type="checkbox" id="ckAll" />check all<br />

　　$("#ckAll").click(function() {

　　$("input[name='sub']").prop("checked", this.checked);

　　});

　　$("input[name='sub']").click(function() {

　　var $subs = $("input[name='sub']");

　　$("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);

　　});

　　</script>

教程首页更多教程