모두 선택하고 선택하지 않는 확인란을 구현하는 jquery의 간단한 예-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

모두 선택하고 선택하지 않는 확인란을 구현하는 jquery의 간단한 예

PHPz

May 16, 2016 pm 05:06 PM

jquery

이 글은 모두 선택하고 없음을 선택하는 jquery 구현의 간단한 예를 주로 소개합니다. 필요한 친구들이 와서 참고하면 좋겠습니다.

데모 1:

<%@ 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 = &#39;wlan!hotExport.do&#39;" 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=&#39;${stu.count}&#39; selected=&#39;selected&#39;>${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,&#39;&#39;)"  onafterpaste="this.value=this.value.replace(/\D/g,&#39;&#39;)" />-->页
										<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=&#39;<%=path %>/themes/default/btn_sy.gif&#39; />
										</a>
										<c:if test="${currPage!=1}">
											<a style="text-decoration:none;" onClick="gopage(${currPage-1})">
												<img border="0" src=&#39;<%=path %>/themes/default/btn_syy.gif&#39; />
											</a>
										</c:if>
										<c:if test="${currPage!=countPage}">
											<a style="text-decoration:none;" onClick="gopage(${currPage+1})">
												<img border="0" src=&#39;<%=path %>/themes/default/btn_xyy.gif&#39; />
											</a>
										</c:if>
										<a style="text-decoration:none;" onClick="gopage(${countPage})">
											<img border="0" src=&#39;<%=path %>/themes/default/btn_wy.gif&#39; />
										</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;
			}
		});
		$(&#39;#allSelect&#39;).attr(&#39;checked&#39;, r);
	}
	function deletes() {
		var delId = "";
		var ck = $("input[name=ck]");

		$.each(ck, function(i) {
			if(ck[i].checked && !ck[i].disabled) {
				delId += "&#39;" + $("#ckvalue" + i).val() + "&#39;,";
			}
		});
		delId = delId.substring(0, delId.lastIndexOf(","));
		if(delId != "") {
			var flag = window.confirm("您确定删除吗?");
			if(!flag) {
				return;
			}
			window.location = "wlan!hotDelete.do?hotWlanId=" + delId;
		} else {
			alert(&#39;请选择需要删除的数据！&#39;);
		}
	}
</script>

로그인 후 복사

데모 2:

<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=&#39;sub&#39;]").prop("checked", this.checked);
  });

  $("input[name=&#39;sub&#39;]").click(function() {
    var $subs = $("input[name=&#39;sub&#39;]");
    $("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
  });
</script>

로그인 후 복사

위 내용은 본 내용의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 jQuery 비디오 튜토리얼을 방문하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7529

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 Feb 27, 2024 pm 06:45 PM

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 jQuery는 웹 사이트 개발에 널리 사용되는 JavaScript 라이브러리로, JavaScript 프로그래밍을 단순화하고 개발자에게 풍부한 기능을 제공합니다. 이 기사에서는 jQuery의 참조 방법을 자세히 소개하고 독자가 빠르게 시작할 수 있도록 구체적인 코드 예제를 제공합니다. jQuery 소개 먼저 HTML 파일에 jQuery 라이브러리를 도입해야 합니다. CDN 링크를 통해 소개하거나 다운로드할 수 있습니다.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

심층 분석: jQuery의 장점과 단점 Feb 27, 2024 pm 05:18 PM

jQuery는 프런트엔드 개발에 널리 사용되는 빠르고, 작고, 기능이 풍부한 JavaScript 라이브러리입니다. 2006년 출시 이후 jQuery는 많은 개발자가 선택하는 도구 중 하나가 되었지만 실제 애플리케이션에서는 몇 가지 장점과 단점도 있습니다. 이 기사에서는 jQuery의 장점과 단점을 심층적으로 분석하고 구체적인 코드 예제를 통해 설명합니다. 장점: 1. 간결한 구문 jQuery의 구문 디자인은 간결하고 명확하여 코드의 가독성과 쓰기 효율성을 크게 향상시킬 수 있습니다. 예를 들어,

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? Feb 28, 2024 am 08:39 AM

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? 프런트엔드 개발에서는 요소의 높이 속성을 조작해야 하는 경우가 종종 있습니다. 때로는 요소의 높이를 동적으로 변경해야 할 수도 있고 요소의 높이 속성을 제거해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 요소의 높이 속성을 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. jQuery를 사용하여 높이 속성을 연산하기 전에 먼저 CSS의 높이 속성을 이해해야 합니다. height 속성은 요소의 높이를 설정하는 데 사용됩니다.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? Feb 29, 2024 am 09:03 AM

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인

jQuery에서 eq의 역할 및 적용 시나리오 이해 Feb 28, 2024 pm 01:15 PM

jQuery는 웹 페이지에서 DOM 조작 및 이벤트 처리를 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에서 요소를 선택하는 데 사용됩니다. 구체적인 사용 및 적용 시나리오는 다음과 같습니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에 있는 요소를 선택합니다. 인덱스 위치는 0부터 계산되기 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다. eq() 메소드의 구문은 다음과 같습니다: $("s

See all articles

모두 선택하고 선택하지 않는 확인란을 구현하는 jquery의 간단한 예

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제