手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery实现checkbox全选全不选的简单实例
jquery实现checkbox全选全不选的简单实例
摘要:demo一:复制代码代码如下:functioncheckSubmit(){document.Search.submit();}functio...

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>

<div>

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<th width="1268">

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

</th>

<td width="26">

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

</td>

<td width="16" 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">

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

</td>

</tr>

</table>

<------- 数据列表 ------------------>

<div>

<div>

<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 colspan="2"><img 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" border="1" bordercolor="#1C568A">

<tr>

<th width="3%"><div align="center" title="全选/全不选"><input id="allSelect" name="allSelect" type="checkbox" title="全选/全不选"/></div></th>

<th width="10%"><div align="center">记录日期</div></th>

<th width="10%"><div align="center">热点类型</div></th>

<th width="13%"><div align="center">上网类型</div></th>

<th width="12%"><div align="center">手机号码</div></th>

<th width="12%"><div align="center">地址建议</div></th>

</tr>

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

<tr onMouseOver="MOver(this)" onMouseOut="Mout(this)">

<td align="center">

<c:choose>

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

<input id="ck" name="ck" type="checkbox" disabled="disabled"/>

</c:when>

<c:otherwise>

<input id="ck" name="ck" type="checkbox"/>

</c:otherwise>

</c:choose>

<input id="ckvalue${sta.count-1}" name="ckvalue${sta.count-1}" type="hidden" value="${dto.id}"/>

</td>

<td align="center">

${dto.recmakedate}

</td>

<td align="center">

${dto.type}

</td>

<td align="center">

${dto.onlinetype}

</td>

<td align="center">

${dto.mobileno}

</td>

<td align="center">

${dto.address}

</td>

</tr>

</s:iterator>

</table>

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

<table width="98%" cellpadding="0" cellspacing="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>

条记录 | 第

<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 id="go" >

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

</a>

<a>

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

</a>

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

<a >

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

</a>

</c:if>

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

<a>

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

</a>

</c:if>

<a>

<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实现checkbox全选全不选的简单实例】相关文章:

javascript实现可全选、反选及删除表格的方法

JS实现简洁、全兼容的拖动层实例

JavaScript数组去重的3种方法和代码实例

基于jquery实现下拉框美化特效

jQuery实现在列表的首行添加数据

jQuery实现的多屏图像图层切换效果实例

js实现鼠标划过给div加透明度的方法

jQuery+ajax实现无刷新级联菜单示例

基于jQuery实现的无刷新表格分页实例

jQuery实现html表格动态添加新行的方法

精品推荐
分类导航