<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script src="js/jquery-1.7.1.min.js"></script>

	<style>

	.hide{display: none;}

	</style>

</head>

<body>

<form action="">

	<span><input type="checkbox" name="" id="selall">全选/取消</span>

<ul>

	<li>

		<span>安徽省</span>

		<input type="checkbox" level="sub" name="sub[]" value="1" id="">

		<ul>

			<li class="hide">

				<span>安庆市</span>

				<input type="checkbox" name="sub[]" level="sub1" id="">

				<span>蚌埠市</span>

				<input type="checkbox" name="sub[]"  level="sub1" id="">

				<span>亳州市</span>

				<input type="checkbox" name="sub[]"  level="sub1" id="">

				<span>巢湖市</span>

				<input type="checkbox" name="sub[]"  level="sub1" id="">

				<span>池州市</span>

				<input type="checkbox" name="sub[]"  level="sub1" id="">

			</li>

		</ul>

	</li>

	<li>

		<span>福建省</span>

		<input type="checkbox" name="sub[]"  level="sub" value="2"  id="">

		<ul>

			<li class="hide">

				<span>龙岩市</span>

				<input type="checkbox" name="sub[]"  level="sub1" id="">

				<span>南平市</span>

				<input type="checkbox" name="sub[]"  level="sub1" id="">

				<span>泉州市</span>

				<input type="checkbox" name="sub[]"  level="sub1" id="">

				<span>厦门市</span>

				<input type="checkbox" name="sub[]"  level="sub1" id="">

			</li>

		</ul>

	</li>

	<li>

		<span>甘肃省</span>

		<input type="checkbox" name="sub[]" level="sub"  value="3"  id="">

		<ul>

			<li class="hide">

				<span>天水市</span>

				<input type="checkbox" name="sub[]"  level="sub1" id="">

				<span>兰州市</span>

				<input type="checkbox" name="sub[]" level="sub1" id="">

				<span>白银市</span>

				<input type="checkbox" name="sub[]" level="sub1" id="">

				<span>庆阳市</span>

				<input type="checkbox" name="sub[]" level="sub1" id="">

			</li>

		</ul>

	</li>

</ul>

</form>

<script>

	$(function(){

		/**

		* jQuery 1.7

		*/

		//全选.取消

		$("#selall").click(function(){

			$("input[level='sub']").prop("checked",this.checked);

			$("input[level='sub']").each(function(index,val) {

					$("input[level='sub']").eq(index).parent("li").find("input[level='sub1']").prop("checked",val.checked);

			  		if(val.checked){

			  			$("input[level='sub']").eq(index).parent("li").find(".hide").show();

				  	}else{

				  		$("input[level='sub']").eq(index).parent("li").find(".hide").hide();

				  	}

			});

		})

		//一级

		$("input[level='sub']").click(function() {

		    $subs = $("input[level='sub']");

		    console.info($subs.length);

		    $("#selall").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);

		    if(this.checked){

			  	 $(this).parent("li").find(".hide").show();

			}else{

				 $(this).parent("li").find(".hide").hide();

			}

		    //二级选择

		    $(this).parent("li").find("input[level='sub1']").prop("checked",this.checked);

	  	});

	  	//二级

	  	$("input[level='sub1']").click(function() {

	  	  //一级选择

		  $parentlen =  $(this).parent("li").find("input[level='sub1']");


　　　　　　　　　　 //如果子级有一个选中那么父级就选中　　
　　　　		  $(this).parent("li").parent("ul").parent("li").find("input[level='sub']").prop("checked" ,  $parentlen.filter(":checked").length>0 ? true :false);

		  //全选.取消,如果所有的省市都选中，那么全选按钮也选中
		  $subs = $("input[level='sub']");

		  $sub1s = $("input[level='sub1']");

		  $subslength = $subs.length+$sub1s.length;

		  $slesubleng = $subs.filter(":checked").length+$sub1s.filter(":checked").length;

		  $("#selall").prop("checked",$subslength ==$slesubleng ? true :false);

	  	});

	})

</script>

</body>

</html>

jquery 多选框的问题的更多相关文章

  1. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  2. Jquery复选框

    Jquery复选框 1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  3. Thymeleaf+layui+jquery复选框回显

    一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...

  4. jquery 复选框

    jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...

  5. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  6. Jquery复选框的全选全不选及选择所有复选框实现全选的复选框

    Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...

  7. Jquery中复选框选中取消实现文本框的显示隐藏

    标签内容 <div class="box"> 请编写javascript代码,完成如下功能要求:<br /> 1.取消复选款后,要求促销价格.促销开始结束日 ...

  8. jQuery 复选框全选反选

    <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click( ...

  9. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  10. jquery checkbox选框操作

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. RPC和Socket,RMI和RPC之间的关系

    远程通信机制RPC与RMI的关系 http://blog.csdn.net/zolalad/article/details/25161133       1.RPC RPC(Remote Proced ...

  2. kafka producer源码

    producer接口: /** * Licensed to the Apache Software Foundation (ASF) under one or more * contributor l ...

  3. Null值的使用

  4. js-其他

  5. DataTable过滤重复字段

    有时我们需要从DataTable中抽取Distinct数据,以前总是以对DataTable进行foreach之类纯手工方式获取. 近来发现DataView可以帮我们直接获取Distinct数据,汗一个 ...

  6. WPF中ControlTemplate和DataTemplate的区别

    下面代码很好的解释了它们之间的区别: <Window x:Class="WPFTestMe.Window12" xmlns="http://schemas.micr ...

  7. CodeForceS#276-A

    A. Factory   One industrial factory is reforming working plan. The director suggested to set a mythi ...

  8. Java 集合系列18之 Iterator和Enumeration比较

    概要 这一章,我们对Iterator和Enumeration进行比较学习.内容包括:第1部分 Iterator和Enumeration区别第2部分 Iterator和Enumeration实例 转载请 ...

  9. 不刷新改变URL: pushState + Ajax

    如果你玩过Google+,看到过YouTube的新界面,便会体验到这个HTML5的新功能.使用pushState + Ajax(pjax),可以实现网页的ajax加载,同时又能完成URL的改变而没有网 ...

  10. ACM 盗梦空间

    盗梦空间 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 <盗梦空间>是一部精彩的影片,在这部电影里,Cobb等人可以进入梦境之中,梦境里的时间会比现实中 ...