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 ...
随机推荐
- 在Android上用AChartEngine轻松绘制图表
本文由 伯乐在线 - LeonHover 翻译.未经许可,禁止转载!英文出处:jaxenter.欢迎加入翻译组. Android发布不久的2008年底,开发者们已经开始寻找制表.制图.绘图的工具库.当 ...
- strust.xml
使用strust2框架,实现跳转,请求对应路径 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTY ...
- Hdu2544 最短路径 四种方法
Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要 ...
- express－8 Handlebars模板引擎(1)
简介 使用JavaScript生成一些HTML document.write('<h1>Please Don\'t Do This</h1>'); document.write ...
- NumPy 学习（2）： 数组的操作
1. 简单一维数组的操作 一维数组的操作类似于python自身的list类型. In [14]: arr = np.arange(10) In [15]: arr Out[15]: array([0, ...
- Ue4如何在C++中获得获得当前角色的指针？
#include "ThirdPersonPluginCharacter.h" #include "Kismet/GameplayStatics.h" //包含 ...
- node.js第一次
随着时代的变迁,日月星辰轮回,不断的有新的事物被创造于世,作为在这个世界活着的前端工程崽的我,最近又接触了一门新手艺“node.js”.自从它2009年诞生至今,被很多前端推崇,我起步已经晚了,还好它 ...
- window计划任务
我的电脑->管理->任务计划程序 [或:控制面板->类别:大图像->管理工具->任务计划程序] 右边创建任务: 常规:名字和 是否 只在用户登录是运行 触发器:新 ...
- 厉害了，摩托罗拉发布全球首款支持VR和AR的手机MotoZ
目前支持谷歌daydream移动VR生态系统的手机型号并不多,除了谷歌自家的Pixel系列外,还有华为推出的mate9系列.如今又到了一位新成员,即升级到Android 7.0后的Moto Z. 更为 ...
- UVA 11427 (概率DP+期望)
题目链接: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=35396 题目大意:每晚打游戏.每晚中,赢一局概率p,最多玩n局, ...