jquery實(shí)現(xiàn)checkbox全選全不選的簡(jiǎn)單實(shí)例
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調(diào)查管理</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 = "導(dǎo)出"/>
</td>
<td width="16" class="null">
<img id="refresh" src="<%=path %>/themes/default/btn_sx.gif" width="50" height="20" alt = "刷新"/>
</td>
</tr>
</table>
<!----------- 數(shù)據(jù)列表 ------------------>
<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>熱點(diǎn)類(lèi)型：</td>
<td>
<s:select list="typeMap" name="msgType" value="msgType" theme="simple"/>
</td>
<td>上網(wǎng)類(lèi)型：</td>
<td>
<s:select list="areaMap" name="msgOnlineType" value="msgOnlineType" theme="simple"/>
</td>
</tr>
<tr>
<td>手機(jī)號(hào)碼：</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">熱點(diǎn)類(lèi)型</div></th>
<th width="13%" style="background-color:#9FBFE3"><div align="center">上網(wǎng)類(lèi)型</div></th>
<th width="12%" style="background-color:#9FBFE3"><div align="center">手機(jī)號(hào)碼</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}頁(yè) | 共${countPage}頁(yè)/${countNum}條記錄</th>
<td>每頁(yè)
<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,'')" />--> 頁(yè)
<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>當(dāng)前查詢(xún)沒(méi)有數(shù)據(jù)！</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('請(qǐng)選擇需要?jiǎng)h除的數(shù)據(jù)！');
}
}
</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全選、全不選實(shí)現(xiàn)代碼小結(jié)
- 基于JQuery實(shí)現(xiàn)CheckBox全選全不選
- jquery 實(shí)現(xiàn)checkbox全選，反選，全不選等功能代碼(奇數(shù))
- jquery實(shí)現(xiàn)checkbox 全選/全不選的通用寫(xiě)法
- jquery全選/全不選/反選另一種實(shí)現(xiàn)方法(配合原生js)
- jquery實(shí)現(xiàn)全選和全不選功能效果的實(shí)現(xiàn)代碼【推薦】
- JQuery選中checkbox方法代碼實(shí)例（全選、反選、全不選）
- 基于jQuery實(shí)現(xiàn)復(fù)選框的全選 全不選 反選功能
- js與jQuery實(shí)現(xiàn)checkbox復(fù)選框全選/全不選的方法
- jquery實(shí)現(xiàn)全選、全不選以及單選功能
相關(guān)文章
jquery.blockUI.js上傳滾動(dòng)等待效果實(shí)現(xiàn)思路及代碼
上傳滾動(dòng)等待效果想必大家在很多場(chǎng)合都有見(jiàn)過(guò)吧，本文將介紹jquery.blockUI.js實(shí)現(xiàn)上傳滾動(dòng)等待效果，感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你2013-03-03
JQuery 遮罩層實(shí)現(xiàn)(mask)實(shí)現(xiàn)代碼
用過(guò)ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我們的使用。2010-01-01
jquery操作checkbox火狐下第二次無(wú)法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無(wú)法勾選問(wèn)題的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
今天發(fā)現(xiàn)HotKeys插件的功能真的很強(qiáng)大,且使用簡(jiǎn)單,以后再也不用考慮鍵值的問(wèn)題了,自己定義每個(gè)鍵的函數(shù)就行了2008-08-08
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過(guò)本文學(xué)習(xí)下吧2017-02-02
jQuery插件jFade實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)的圖片高亮其它變暗
本文給大家介紹的是一款重點(diǎn)突出的jQuery特效插件效果，使用jFade實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)的圖片高亮其它變暗，非常實(shí)用，推薦給小伙伴們參考下。2015-03-03
jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開(kāi)隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開(kāi)就隱藏的效果，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
JQuery設(shè)置獲取下拉菜單某個(gè)選項(xiàng)的值(比較全)
這篇文章主要介紹了JQuery如何設(shè)置獲取下拉菜單某個(gè)選項(xiàng)的值(比較全),需要的朋友可以參考下2014-08-08
JQuery選中checkbox方法代碼實(shí)例（全選、反選、全不選）
這篇文章主要介紹了JQuery選中checkbox方法代碼實(shí)例（全選、反選、全不選）,本文直接給出代碼實(shí)例,需要的朋友可以參考下2015-04-04
jquery 中的each()跳出循環(huán)的語(yǔ)句
很多新手朋友們都不知道jquery 中的each()怎么跳出循環(huán)，在each的回調(diào)函數(shù)中使用return false2014-05-05