最近需求遇到的问题
1 两层div 外层父级checkbox框 内层子级checkbox框
2 实现页面一加载 父级 子级全部选中
实现方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8">
<link rel="stylesheet" href="../ui-desgin/css/jquery.mobile-1.1.2.css" />
<script src="../ui-desgin/scripts/jquery-1.7.2.js"></script>
<script src="../ui-desgin/scripts/jquery.mobile-1.1.2.js"></script>
<title></title>
<style type="text/css">
.outcheckbox{
}
.inner{
}
</style>
<script type="text/javascript">
$(function(){
$(".outcheckbox").find("input[type='checkbox']").attr('checked','true');
})
</script>
</head>
<body>
<div id="page" data-role="page" data-theme="b">
<div data-role="header">
<h3>测试页面</h3>
</div>
<div id="content" data-role="content">
<div class="outcheckbox">
<label for="test1">里面的checkbox1</label>
<input type="checkbox" id="test1" checked="">
<div class="inner" style="width:10em;">
<label for="test11">里面的checkbox11</label>
<input type="checkbox" id="test11" checked="">
</div>
</div>
<div class="outcheckbox">
<label for="test2">外面的checkbox2</label>
<input type="checkbox" id="test2" checked="">
<div class="inner" style="width:10em;">
<label for="test22">里面的checkbox22</label>
<input type="checkbox" id="test22" checked="">
</div>
</div>
</div>
</div>
</body>
</html>
实现效果:
代码很简单 但是有个易出错的点 如果你没有给checkbox显示设置 checked="" 属性 是不会生效的
下面要完成的效果是
勾选独立的一个外层checkbox 里面的内层checkbox相应勾选 否则都不勾选 而且与下面的另一个并列外层checkbox无关