Heim >Web-Frontend >js-Tutorial >jquery实现checkbox全选全不选的简单实例
jquery实现checkbox全选全不选的简单实例
- PHPzOriginal
- 2016-05-16 17:06:091179Durchsuche
本篇文章主要是对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视频教程！
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js中switch case循环实例代码_javascript技巧Nächster Artikel：深入理解javascript中return的作用_基础知识