您的位置：首页 > 其它

关于jqery的全选和反选-

2015-07-23 18:59 337 查看
上个图先说明需求



下面是代码，可以直接保存测试结果，jq用的cdn。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script>
</head>
<body>
<form class="form-horizontal" role="form" method="post" action="/Admin/RbacRole/roleAccessHandle.shtml">
<input name="role_id" type="hidden" value="2">
<h3 class="header smaller lighter blue">系统全部权限 <input value="1_1" name="access[]" type="checkbox" level="1"></h3>
<div class="widget-box transparent" style="margin-bottom: 15px">
<div class="widget-header">
<h5 class="widget-title lighter"><strong>用户管理</strong> <input value="6_2" name="access[]" type="checkbox" level="2" checked="checked"></h5>
</div>
<div class="widget-body">
<div class="widget-main padding-6 no-padding-left no-padding-right">
<style>
.list-inline li {margin-top: 10px;margin-right: 5px}
</style>
<ul class="list-inline">
<li>测试6 <input value="11_3" type="checkbox" name="access[]" level="3" checked="checked"></li><li>测试7 <input value="12_3" type="checkbox" name="access[]" level="3" checked="checked"></li>                                        </ul>
</div>
</div>
</div><div class="widget-box transparent" style="margin-bottom: 15px">
<div class="widget-header">
<h5 class="widget-title lighter"><strong>产品管理</strong> <input value="8_2" name="access[]" type="checkbox" level="2"></h5>
</div>
<div class="widget-body">
<div class="widget-main padding-6 no-padding-left no-padding-right">
<style>
.list-inline li {margin-top: 10px;margin-right: 5px}
</style>
<ul class="list-inline">
<li>测试8 <input value="13_3" type="checkbox" name="access[]" level="3"></li><li>测试910 <input value="14_3" type="checkbox" name="access[]" level="3"></li>                                        </ul>
</div>
</div>
</div><div class="widget-box transparent" style="margin-bottom: 15px">
<div class="widget-header">
<h5 class="widget-title lighter"><strong>订单管理</strong> <input value="9_2" name="access[]" type="checkbox" level="2"></h5>
</div>
<div class="widget-body">
<div class="widget-main padding-6 no-padding-left no-padding-right">
<style>
.list-inline li {margin-top: 10px;margin-right: 5px}
</style>
<ul class="list-inline">
<li>测试11 <input value="15_3" type="checkbox" name="access[]" level="3"></li><li>测试12 <input value="16_3" type="checkbox" name="access[]" level="3"></li>                                        </ul>
</div>
</div>
</div><div class="widget-box transparent" style="margin-bottom: 15px">
<div class="widget-header">
<h5 class="widget-title lighter"><strong>品牌管理</strong> <input value="10_2" name="access[]" type="checkbox" level="2"></h5>
</div>
<div class="widget-body">
<div class="widget-main padding-6 no-padding-left no-padding-right">
<style>
.list-inline li {margin-top: 10px;margin-right: 5px}
</style>
<ul class="list-inline">
<li>测试14 <input value="18_3" type="checkbox" name="access[]" level="3"></li><li>测试13 <input value="19_3" type="checkbox" name="access[]" level="3"></li><li>尾巴 <input value="21_3" type="checkbox" name="access[]" level="3"></li>                                        </ul>
</div>
</div>
</div><div class="widget-box transparent" style="margin-bottom: 15px">
<div class="widget-header">
<h5 class="widget-title lighter"><strong>待定</strong> <input value="20_2" name="access[]" type="checkbox" level="2"></h5>
</div>
<div class="widget-body">
<div class="widget-main padding-6 no-padding-left no-padding-right">
<style>
.list-inline li {margin-top: 10px;margin-right: 5px}
</style>
<ul class="list-inline">
</ul>
</div>
</div>
</div>                        <div class="clearfix form-actions">
<div class="col-md-offset-2 col-md-9">
<button class="btn btn-info" type="submit">
<i class="ace-icon fa fa-check bigger-110"></i>
保存
</button>
     
<button class="btn" type="reset">
<i class="ace-icon fa fa-undo bigger-110"></i>
重置
</button>
</div>
</div>
</form>
</body>
</html>

<script>

$(function(){
// 全部选择，节点为1
$("input[level='1']").on("click",function() {
if($(this).is(":checked") ) {
// alert('seletct all');
$(".transparent").find("input").prop("checked",true);
} else {
// alert('cancel all');
$(".transparent").find("input").prop("checked", false);
}
});
// 2为控制器
$("input[level='2']").on('click',(function(){
// if($(this).attr('checked')){
if($(this).is(":checked") ){
alert('oo');
$(this).parents().parents('.transparent').find('input').prop('checked',true);

}else{
alert('cancle');
$(this).parents().parents('.transparent').find('input').prop('checked',false);
}
})
);

})

</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  cdn
相关文章推荐
新的分享
章节导航