<!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. hadoop中map和reduce的数量设置问题

    转载http://my.oschina.net/Chanthon/blog/150500 map和reduce是hadoop的核心功能,hadoop正是通过多个map和reduce的并行运行来实现任务 ...

  2. Android学习系列(37)--App调试内存泄露之Context篇(下)

    接着<Android学习系列(36)--App调试内存泄露之Context篇(上)>继续分析. 5. AsyncTask对象 我N年前去盛大面过一次试,当时面试官极力推荐我使用AsyncT ...

  3. 端口偷窃（Port Stealing）技术

    端口偷窃(Port Stealing)技术   该技术主要用于局域网中间人攻击中,尤其目标计算机采用静态ARP后,导致ARP欺骗无效.   背景知识:路由器为了方便转发数据包,会在内部记录每个接口和M ...

  4. Transform组件C#游戏开发快速入门

    Transform组件C#游戏开发快速入门大学霸 组件(Component)可以看作是一类属性的总称.而属性是指游戏对象上一切可设置.调节的选项,如图2-8所示.本文选自C#游戏开发快速入门大学霸   ...

  5. 服装PDA软件|服装销售开单PDA管理软件|服装PDA管理系统|服装PDA点货系统|服装移动POS系统

    浩瀚软件为了更好服务于广大批发客户群体进行销售.盘点.调拨配送等.深圳浩瀚软件推出基于无线网络版移动PDA销售开单系统.该系统支持无线3G.WIFI.GPRS系统,用户可以手持PDA在无线网络连接状态 ...

  6. WPF三种基本触发器与【与或】逻辑触发器

    wpf中的触发器是应用于程序界面模板.样式.皮肤.主题的基础.以下作为学习的记录. 1,三种基本触发器,属性触发器.数据触发器.事件触发器 属性触发器 <!--属性触发器--> <T ...

  7. 服务器控件和 viewstate

    //不会产生处理回发事件的方法.类似客户端html Repeater rep = new Repeater(); DataList dtl = new DataList(); FileUpload f ...

  8. spring boot 打包成jar 包在发布到服务器上

    http://blog.csdn.net/sai739295732/article/details/49444447

  9. html表单元素的colspan和rowspan

    colspan和rowspan这两个属性用于创建特殊的表格. colspan用来指定单元格横向跨越的列数:colspan就是合并列的,colspan=2的话就是合并两列. rowspan用来指定单元格 ...

  10. Storm编译打包过程中遇到的一些问题及解决方法

    作者: 大圆那些事 | 文章可以转载,请以超链接形式标明文章原始出处和作者信息 网址: http://www.cnblogs.com/panfeng412/archive/2013/11/30/som ...