<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style>
.listbox{width:100%; border:1px solid #ccc; overflow: hidden; margin-bottom:5px;}
.listleft{float: left;border-right:1px solid #ccc;width:200px;padding:5px 10px;}
.listright{float: left;width:auto;padding:5px 10px;}
</style>
</head>
<body class="no-skin">
<!-- PAGE CONTENT BEGINS -->
<div class="page-header">
<h1> 表格 <small> <i class="ace-icon fa fa-angle-double-right"></i> Static & Dynamic Tables </small> </h1>
</div>
<table id="sample-table-1" class="table table-striped table-bordered table-hover dataTable">
<thead id="checkwrap">
<tr>
<th class="center ">
客户管理 全选
<label class="position-relative menu-all">
<input type="checkbox" class="ace check1" />
</label>
</th>
<th>
<div class="listbox">
<div class="listleft">
亲属信息管理11
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label>
</div>
<div class="listright">
基本信息管理
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理2
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理3
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
</div>
</div>
<div class="listbox">
<div class="listleft">
亲属信息管理11
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label>
</div>
<div class="listright">
基本信息管理
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理2
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理3
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
</div>
</div>
</th>
</tr>
<tr>
<th class="center ">
客户管理 全选
<label class="position-relative menu-all">
<input type="checkbox" class="ace check1" />
</label>
</th>
<th>
<div class="listbox">
<div class="listleft">
亲属信息管理11
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label>
</div>
<div class="listright">
基本信息管理
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理2
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理3
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
</div>
</div>
<div class="listbox">
<div class="listleft">
亲属信息管理11
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label>
</div>
<div class="listright">
基本信息管理
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理2
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理3
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
</div>
</div>
</th>
</tr>
<tr>
<th class="center ">
客户管理 全选
<label class="position-relative menu-all">
<input type="checkbox" class="ace check1" />
</label>
</th>
<th>
<div class="listbox">
<div class="listleft">
亲属信息管理11
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label>
</div>
<div class="listright">
基本信息管理
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理2
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理3
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
</div>
</div>
<div class="listbox">
<div class="listleft">
亲属信息管理11
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label>
</div>
<div class="listright">
基本信息管理
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理2
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理3
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
</div>
</div>
</th>
</tr>
<tr>
<th class="center ">
客户管理 全选
<label class="position-relative menu-all">
<input type="checkbox" class="ace check1" />
</label>
</th>
<th>
<div class="listbox">
<div class="listleft">
亲属信息管理11
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label>
</div>
<div class="listright">
基本信息管理
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理2
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理3
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
</div>
</div>
<div class="listbox">
<div class="listleft">
亲属信息管理11
<label class="position-relative">
<input type="checkbox" class="ace check2" name="node_ids[]"/>
</label>
</div>
<div class="listright">
基本信息管理
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理2
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
基本信息管理3
<label class="position-relative">
<input type="checkbox" class="ace check3" />
</label>
</div>
</div>
</th>
</tr>
</thead>
</table>
<!-- PAGE CONTENT ENDS -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery.min.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script>
$(function(){
check3();
check2();
check1();
})
function check1(){
$('.check1').click(function(){
var ok=$(this).prop("checked");
$(this).parents('tr').find("input[type='checkbox']").prop('checked',ok);
})
};
function check2()
{
$('.check2').click(function(){
var ok=$(this).prop("checked");
$(this).parents('.listleft').siblings().andSelf().find('.check3').prop("checked",ok);
var oCheck2=$(this).parents('.listbox').siblings().andSelf().find(".check2");
$(this).parents('tr').find('.check1').prop("checked",trueorfalse(oCheck2));
})
}
function check3()
{
$('.check3').click(function(){
var ockeck3 = $(this).parent().siblings().andSelf().find(".check3");
$(this).parents('.listbox').find('.check2').prop("checked",trueorfalse(ockeck3));
var oCheck1=$(this).parents('.listbox').siblings().andSelf().find('.check2');
$(this).parents('tr').find('.check1').prop("checked",trueorfalse(oCheck1))
})
}
// 找同级元素的checked状态
function trueorfalse(obj)
{
var bool = false;
$(obj).each(function(){
if($(this).prop("checked"))
{
bool= true;
}
})
return bool;
}
</script>
</body>
</html>
三级联动checkbox 选中
最新推荐文章于 2024-08-21 10:32:56 发布
扫一扫
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
