<!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. C#分布式缓存Couchbase使用

    目前C#业界使用得最多的 Cache 系统主要是 Memcached和 Redis. 这两个 Cache 系统可以说是比较成熟的解决方案,也是很多系统当然的选择. 一.简介 目前C#业界使用得最多的 ...

  2. YAML 技术研究

    YAML预研文档 YAML概要 YAML是"YAML Ain't a Markup Language"(YAML不是一种置标语言)的递归缩写,早先YAML的意思其实是:" ...

  3. 【jQuery 区别】.click()和$(document).on("click","指定的元素",function(){});的区别

    给出以下的代码展示: //绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label ...

  4. MPAndroidChart饼图属性及相关设置

    公司最近在做统计功能,所以用到了饼图,在网上查了一些资料最终决定使用MPAndroidChart,使用起来非常方便,还有一些问题通过各种查找,终于解决...废话不多说,先看下效果图: 布局文件: &l ...

  5. Liferay 6.2 改造系列之七：关闭使用条款确认、密码提醒、新用户强制修改密码等功能

    关闭使用条款确认: 在/portal-master/portal-impl/src/portal.properties配置文件中,有如下配置: # # Set this to true if all ...

  6. 改变图片尺寸（python）

    for name in /图片路径; do convert -resize 256x256! $name $namedone

  7. CSS3_实现圆角效果box-shadow

    1.outline的直角与圆角 来给个div: <div class="use-outline"></div> 来再给个样式: .use-outline{ ...

  8. JQuery学习之操作DOM

    1.DOM,就是Document Object Model(文档对象模型) 2.获得内容的方法: **text():设置或返回所选元素的文本内容 $("#btn1").click( ...

  9. 分享Kali Linux 2016.2第48周镜像文件

    分享Kali Linux 2016.2第48周镜像文件Kali Linux官方于11月27日发布Kali Linux 2016.2的第48周镜像.这次延续以往规律,仍然是11个镜像文件.默认的Gnom ...

  10. 黑客语（Leet）

    黑客语(Leet)   Leet是从网络发展起来的一种文字书写方式.通常将英语中的字母替换为数字和特殊符号.这种方式被很多黑客组织所使用.由于具有隐密性,所以它也广泛被用于密码中.使用Leet书写的密 ...