jquery 多选框的问题
<!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 多选框的问题的更多相关文章
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- Jquery复选框
Jquery复选框 1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- Thymeleaf+layui+jquery复选框回显
一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...
- jquery 复选框
jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- Jquery复选框的全选全不选及选择所有复选框实现全选的复选框
Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...
- Jquery中复选框选中取消实现文本框的显示隐藏
标签内容 <div class="box"> 请编写javascript代码,完成如下功能要求:<br /> 1.取消复选款后,要求促销价格.促销开始结束日 ...
- jQuery 复选框全选反选
<script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click( ...
- springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- jquery checkbox选框操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- Zookeeper 初体验之——伪分布式安装（转）
原文地址: http://blog.csdn.net/salonzhou/article/details/47401069 简介 Apache Zookeeper 是由 Apache Hadoop 的 ...
- jQuery插件开发--（转）
1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...
- 分数try catch
要求:编写一个程序,此程序在运行时要求用户输入一个 整数,代表某门课的考试成绩,程序接着给出“不及格”.“及格”.“中”.“良”.“优”的结论.要求程序必须具备足够的健壮性,不管用户输入什 么样的内容 ...
- SPOJ SUBST1 后缀数组
题目链接:http://www.spoj.com/problems/SUBST1/en/ 题意:给定一个字符串,求不相同的子串个数. 思路:直接根据09年oi论文<<后缀数组——出来字符串 ...
- 《DSP using MATLAB》示例Example4.12
上代码: b = [0, 1, 1]; a = [1, -0.9, 0.81]; % [R, p, C] = residuez(b,a); Mp = (abs(p))' Ap = (angle(p)) ...
- 解决：未能加载文件或程序集“EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”
使用nuget管理程序包,有可能在不同时间安装不同版本的Entity Framework:在项目创建初期安装的是6.0.0.0版本,后来添加的类库,安装了6.1.1版本,所以出现这个问题. 解决办法: ...
- Python基础4- 字符串
Python字符串是由数字.字母.下划线组成的一串字符,我们可以使用引号来创建字符串.如:str = 'Helloworld'在Python中没有char类型,单个字符也作为string使用; Pyt ...
- json日期格式问题的办法
//json日期转换 格式(2015-01-01) <input class="easyui-datebox" name="sbdj_txtShebaoka_Lin ...
- 【转】SpringTest框架JUnit单元测试用例获取ApplicationContext实例的方法
转自:http://www.coderli.com/junit-spring-test-applicationcontext JUnit单元测试用例中使用Spring框架,直接方式如下. @RunWi ...
- android 第三方 Im
1.阿里百川 单聊.群聊.客服能力集成,仅需花费4小时,不收费,0成本接入,让App轻松拥有沟通能力,历经多次双十一考验,消息到达率100%,全年可用性高达99.99%,登录异常提醒,木马钓鱼网站监测 ...