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 ...
随机推荐
- filter应用案例四：页面静态化
1 说明 你到"当当"搜索Java分类图书时,"当当"会去查询数据库!每天都有很多人去搜索"Java分类"的图书,每次都去访问数据库,这会有 ...
- loadrunner中lr_save_searched_string函数的使用
控制abc后面的第几个字符: 控制字符长度: 总结: 实际应用: Action() { int i =0,j=0; char *tt_url = lr_eval_string("{tt_ur ...
- CSS3设置多张背景图片
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");background-rep ...
- 门店 车销 批发送货 商超 快销专用扫描打印开单手持PDA移动销售管理系统
门店 车销 批发送货 商超 快销专用扫描打印开单手持PDA移动销售管理系统的详细介绍 一. 以PDA等移动终端为媒介,随时随地掌握门店信息. 二. 后台集成了数据统计.多指标分析.销售.库存.会员管理 ...
- 解决eclipse报PermGen space内存溢出异常的问题
异常问题如下所示: 1.点击Eclipse->Window->Preferences,如下所示: 2.点击Server->Runtime Environments,选择Apache ...
- BIT LA 4329 Ping pong
题目传送门 题意:训练指南P197 分析:枚举裁判的位置,用树状数组来得知前面比它小的和大的以及后面比它小的和大的,然后O (n)累加小 * 大 + 大 * 小 就可以了 #include <b ...
- Js提示框
百度搜索 1.artDialog 2.ymPrompt 以下网站提供资料参考 http://www.17sucai.com/ http://www.juheweb.com/ http://www.5i ...
- 【转】Xcelsius2008 水晶易表问题 部分汇总
要使用 Xcelsius 2008,需要安装 Adobe Flash 吗? 若要正常运行 Xcelsius 2008,必须安装 Adobe Flash Player 版本 9.如果在安装过程中没有安装 ...
- 如何真正提高ASP.NET网站的性能
摘要:前言 怎么才能让asp.net网站飞得更快,有更好的性能?这是很多开发者常常思考的一个问题.我有时候会做大量的测试,或请求别人帮忙采集一些数据,希望能够验证网上一些专家的建议或证明 前言 怎么才 ...
- 生理周期[PKU1006]
生理周期 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 132195 Accepted: 42171 Descripti ...