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

本篇文章主要是对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"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="<%=path %>/scripts/jquery.js"></script> <script type="text/javascript"> 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> <style type="text/css">  </style> </head> <body id="master"> <div id="mainareacontent"> <div class="mainarea"> <div class="dataarea"> <table width="100%" cellpadding="0" cellspacing="0" class="title"> <tr> <th width="1268"> <span>wlan调查管理</span> </th> <td width="26" class="null"> <input type="image" name="import" src="<%=path %>/themes/default/btn_sc.gif" onclick="deletes()" alt="勾选批量删除" /> </td> <td width="16" class="null" align="center"> <input type="image" name="export" src="<%=path %>/themes/default/btn_exp.gif" onclick="window.location = 'wlan!hotexport.do'" alt="导出" /> </td> <td width="16" class="null"> <img id="refresh" src="<%=path %>/themes/default/btn_sx.gif" width="50" height="20" alt="刷新" /> </td> </tr> </table>  <div class="datagrid"> <div class="search" style="margin-top:0px;"> <form action="wlan!querysurveywlan.do" method="post" onsubmit="return false;" name="search" id="search"> <table cellpadding="0" cellspacing="0" width="97%"> <tr> <td>记录日期：</td> <td><input type="text" name="msgdate" id="msgdate" value="${msgdate}" /></td> <td>热点类型：</td> <td> <s:select list="typemap" name="msgtype" value="msgtype" theme="simple" /> </td> <td>上网类型：</td> <td> <s:select list="areamap" name="msgonlinetype" value="msgonlinetype" theme="simple" /> </td> </tr> <tr> <td>手机号码：</td> <td> <input type="text" name="msgmobileno" id="msgmobileno" value="${msgmobileno}" /> </td> <td>地址建议：</td> <td> <input type="text" name="msgaddress" id="msgaddress" value="${msgaddress}" /> </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> <input type="hidden" name="prepage" id="prepage" value="${prepage}" /> <input type="hidden" name="currpage" id="currpage" value="${currpage}" /> </form> </div> <table id="list" width="100%" cellpadding="0" cellspacing="0" class="dg_borderstyle" border="1" bordercolor="#1c568a"> <tr> <th width="3%" style="background-color:#9fbfe3"> <div align="center" title="全选/全不选"><input id="allselect" name="allselect" type="checkbox" onclick="selectall()" title="全选/全不选" /></div> </th> <th width="10%" style="background-color:#9fbfe3"> <div align="center">记录日期</div> </th> <th width="10%" style="background-color:#9fbfe3"> <div align="center">热点类型</div> </th> <th width="13%" style="background-color:#9fbfe3"> <div align="center">上网类型</div> </th> <th width="12%" style="background-color:#9fbfe3"> <div align="center">手机号码</div> </th> <th width="12%" style="background-color:#9fbfe3"> <div align="center">地址建议</div> </th> </tr> <s:iterator value="surveylist" id="dto" status="sta"> <tr onmouseover="mover(this)" onmouseout="mout(this)" class="dg_alternatingitemstyle"> <td align="center" class="f"> <c:choose> <c:when test="1==1"> <input id="ck" name="ck" type="checkbox" onclick="cancelckselect()" disabled="disabled" /> </c:when> <c:otherwise> <input id="ck" name="ck" type="checkbox" onclick="cancelckselect()" /> </c:otherwise> </c:choose> <input id="ckvalue${sta.count-1}" name="ckvalue${sta.count-1}" type="hidden" value="${dto.id}" /> </td> <td align="center" class="f"> ${dto.recmakedate} </td> <td align="center" class="f"> ${dto.type} </td> <td align="center" class="f"> ${dto.onlinetype} </td> <td align="center" class="f"> ${dto.mobileno} </td> <td align="center" class="f"> ${dto.address} </td> </tr> </s:iterator> </table> <s:if test="surveylist.size>0"> <table width="98%" cellpadding="0" cellspacing="0" class="dg_pagestyle"> <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> 条记录 | 第 <select name="gopage" id="gopage"> <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> 页 <a onclick="fnull()" id="go" style="text-decoration:none;"> <img border="0" src="<%=path %>/themes/default/btn_go.gif" /> </a> <a style="text-decoration:none;" onclick="gopage(1)"> <img border="0" src='<%=path %>/themes/default/btn_sy.gif' /> </a> <c:if test="${currpage!=1}"> <a style="text-decoration:none;" onclick="gopage(${currpage-1})"> <img border="0" src='<%=path %>/themes/default/btn_syy.gif' /> </a> </c:if> <c:if test="${currpage!=countpage}"> <a style="text-decoration:none;" onclick="gopage(${currpage+1})"> <img border="0" src='<%=path %>/themes/default/btn_xyy.gif' /> </a> </c:if> <a style="text-decoration:none;" onclick="gopage(${countpage})"> <img border="0" src='<%=path %>/themes/default/btn_wy.gif' /> </a> </td> </tr> </table> </s:if> <s:else> <center>当前查询没有数据！</center> </s:else> </div> </div> </div> </div> </body></html><script> $(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二：
<script src="jquery-1.6.2.min.js"></script><input type="checkbox" id="ckall" />check all<br /><input type="checkbox" name="sub" />1<br /><input type="checkbox" name="sub"/>2<br /><input type="checkbox" name="sub"/>3<br /><input type="checkbox" name="sub"/>4<br /><script> $("#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>
以上就是本章的全部内容，更多相关教程请访问jquery视频教程！

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

推荐信息