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 ...
随机推荐
- java中static作用详解
static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被static修饰的成员变量和成员方法独立于该类的任何 ...
- checkbox全选和子选
用jq: $(function() { var $subBox = $("input[name='subBox']"); $("#checkAll").clic ...
- Spring官网改版后下载
Spring官网改版后找了好久都没有找到直接下载Jar包的链接,下面汇总些网上提供的方法,亲测可用. 1.直接输入地址,改相应版本即可:http://repo.springsource.org/lib ...
- MIT 6.828 JOS学习笔记0. 写在前面的话
0. 简介 操作系统是计算机科学中十分重要的一门基础学科,是一名计算机专业毕业生必须要具备的基础知识.但是在学习这门课时,如果仅仅把目光停留在课本上一些关于操作系统概念上的叙述,并不能对操作系统有着深 ...
- hdu 5446 Unknown Treasure Lucas定理+中国剩余定理
Unknown Treasure Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Other ...
- Laravel系列2入门使用
最好的教程是官方文档! homestead安装好,就可以使用了. 安装Laravel composer create-project --prefer-dist laravel/laravel blo ...
- hdu2191 多重背包
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2191 多重背包:有N种物品和一个容量为V的背包.第i种物品最多有n[i]件可用,每件费用是 ...
- express－13 中间件
简介 从概念上讲,中间件是一种功能的封装方式,具体来说就是封装在程序中处理HTTP请求的功能. 中间件是在管道中执行的,在Express程序中,通过调用app.use向管道中插入中间件.(在Expre ...
- hdu 1520 Anniversary party 基础树dp
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- SPFA+Dinic HDOJ 3416 Marriage Match IV
题目传送门 题意:求A到B不同最短路的条数(即边不能重复走, 点可以多次走) 分析:先从A跑最短路,再从B跑最短路,如果d(A -> u) + w (u, v) + d (B -> v) ...