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

来源：懂视网责编：小采时间：2020-11-27 21:18:02

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

jquery实现checkbox全选全不选的简单实例:本篇文章主要是对jquery实现checkbox全选全不选的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助。demo一：<%@ page language="java" pageEncoding="UTF-8"%> <%@ tagl

推荐度：

点击下载本文 文档为doc格式

导读jquery实现checkbox全选全不选的简单实例:本篇文章主要是对jquery实现checkbox全选全不选的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助。demo一：<%@ page language="java" pageEncoding="UTF-8"%> <%@ tagl

本篇文章主要是对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">
	<!-- .f {
	font-size: 12px;
	}
	
	-->
	</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>
	<!-- <input type="text" style="width:25px;" id="goPage" value="${currPage}" onkeydown="if(event.keyCode==13){fnull();return false;}" style="IME-MODE: disabled; WIDTH: 60px; HEIGHT: 15px" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />-->页
	<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实现checkbox全选全不选的简单实例

推荐度：

点击下载本文 文档为doc格式

标签：全选选中实例

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐