当前位置: 代码迷 >> Web前端 >> jquery一个小案例-关于复选框的一个案例
  详细解决方案

jquery一个小案例-关于复选框的一个案例

热度:93   发布时间:2012-10-11 10:16:10.0
jquery一个小案例------关于复选框的一个案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
 <script type="text/javascript" src="jquery-1.4.4.js"></script>
 

  <script type="text/javascript">
		function checkMain( m){
			var flag=$(m).attr("checked");
			$(m).parent().next().find("input[type=checkbox][name=menu]").attr("checked",flag);
		}
		
		function checkSub(n){
			var flag=$(n).attr("checked");
			if(flag){
				$(n).parent().parent().parent().prev().find("input[type=checkbox][name=menu]").attr("checked",flag);

			}else{
					var size=$(n).parent().parent().parent().find("input:checked[type=checkbox][name=menu]").size();
					if(size==0){
					$(n).parent().parent().parent().prev().find("input[type=checkbox][name=menu]").attr("checked",false);
					}	
			}

		}
		function selectAll(){
			$("input[type=checkbox][name=menu]").attr("checked",true);
		}
	
		function unSelect(){
			$("input[type=checkbox][name=menu]").attr("checked",false);
		}

  </script>


 </head>

 <body>
		<ul>
			<li>
				<div>
					<input type="checkbox" name="menu" onclick="checkMain(this)" />
					菜单1
				</div>
				<ul>
					<li>
						<div>
							<input type="checkbox" name="menu" onclick="checkSub(this)" />
							菜单1.1
						</div>
					</li>
					<li>
						<div>
							<input type="checkbox" name="menu" onclick="checkSub(this)" />
							菜单1.2
						</div>
					</li>

					<li>
						<div>
							<input type="checkbox" name="menu" onclick="checkSub(this)" />
							菜单1.3
						</div>
					</li>
				</ul>
			</li>
			<li>
				<div>
					<input type="checkbox" name="menu" onclick="checkMain(this)" />
					菜单2
				</div>
				<ul>
					<li>
						<div>
							<input type="checkbox" name="menu" onclick="checkSub(this)" />
							菜单2.1
						</div>
					</li>
					<li>
						<div>
							<input type="checkbox" name="menu" onclick="checkSub(this)" />
							菜单2.2
						</div>
					</li>
				</ul>
			</li>
			<li>
				<div>
					<input type="checkbox" name="menu" onclick="checkMain(this)" />
					菜单3
				</div>
			</li>
		</ul>

		<input type="button" value="全选" onclick="selectAll()"></input>
		<input type="button" value="不选" onclick="unSelect()"></input>
	</body>
</html>

?

  相关解决方案