<!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. js获取今天明天

    目的:记录中展现"今天","明天",除外展现月日. 借鉴: <html> <head> <meta http-equiv=&quo ...

  2. 【JDK】电脑上安装多个JDK ，修改JAVA_HOME后没有作用

    电脑上装了 C:\Program Files\Java\jdk1.6.0_43      C:\Program Files\Java\jdk1.7.0_80     C:\Program Files\ ...

  3. sudo -u hdfs hdfs balancer出现异常 No lease on /system/balancer.id

    16/06/02 20:34:05 INFO balancer.Balancer: namenodes = [hdfs://dlhtHadoop101:8022, hdfs://dlhtHadoop1 ...

  4. Android拓展系列(11)--打造Windows下便携的Android源码阅读环境

    因为EXT和NTFS格式的差异,我一直对于windows下阅读Android源码感到不满. 前几天,想把最新的android5.0的源码下下来研究一下,而平时日常使用的又是windows环境,于是专门 ...

  5. 移动终端app测试点总结

    以下所有测试最后必须在真机上完整的执行1.安装.卸载测试 在真机上的以及通过91等第三方的安装与卸载 安装在手机上还是sd卡上 2.启动app测试3.升级测试 数字签名.升级覆盖安装.下载后手动覆盖安 ...

  6. jquery的隐藏与显示

    ###显示与隐藏,通过用hide()和show()函数来实现 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback ...

  7. mybatis做like模糊查询

    http://www.cnblogs.com/cyttina/p/3894428.html

  8. CSS background 属性

    CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...

  9. hive Java API

    Java连接hive进行操作的方式有多种,接触到了两种: 首先,hive要起动远程服务接口,命令: hive --service hiveserver -p 50000 & 1. 通过jdbc ...

  10. HTTPS 原理解析(转)

    一 前言 在说HTTPS之前先说说什么是HTTP,HTTP就是我们平时浏览网页时候使用的一种协议.HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全.为了保证 ...