主要是利用 dl dt dd 列表, 还运用的 checked 的选中事件来控制. 这样就可以展现一颗树, 或者列表了
html 部分
- <div id="wrapper">
- <dl>
- <dt><input type="checkbox" name=""id="first" /> 一级目录 </dt>
- <dd>
- <dl>
- <dt class="secondDd"><input type="checkbox" name="second" id="firstSecond" /> 二级目录 </dt>
- <dd class="threet"><input type="checkbox" name="threeth" id="" /> 三级目录 </dd>
- <dd class="threet"><input type="checkbox" name="threeth" id="" /> 三级目录 </dd>
- <dd class="threet"><input type="checkbox" name="threeth" id="" /> 三级目录 </dd>
- <dd class="threet"><input type="checkbox" name="threeth" id="" /> 三级目录 </dd>
- </dl>
- </dd>
- <dd class="secondDd"><input type="checkbox" name="second" id="" /> 二级目录 </dd>
- <dd class="secondDd"><input type="checkbox" name="second" id="" /> 二级目录 </dd>
- <dd class="secondDd"><input type="checkbox" name="second" id="" /> 二级目录 </dd>
- <dd class="secondDd"><input type="checkbox" name="second" id="" /> 二级目录 </dd>
- </dl>
- </div>
JS 部分
- $("#wrapper>dl").children("dd").hide();
- $("#first").click(function(){
- if (this.checked) {
- $("dd").show();
- for(var i=0;i<$("input").length;i++){
- $("input").eq(i).attr("checked","checked") ;
- }
- } else{
- for (var index=0;index<$(".secondDd").length;index++) {
- $(".secondDd").eq(index).hide();
- }
- for(var i=0;i<$("input[name=second]").length;i++){
- $("input[name=second]").eq(i).prop("checked",false)
- }
- }
- })
- $("#firstSecond").click(function(){
- if (this.checked) {
- $("#first").prop("checked",true)
- for (var index=0;index<$(".threet").length;index++) {
- $(".threet").eq(index).show();
- }
- for(var i=0;i<$("input[name=threeth]").length;i++){
- $("input[name=threeth]").eq(i).attr("checked","checked").parent("dd").show();
- }
- } else{
- $("#first").prop("checked",false)
- for(var i=0;i<$("input[name=threeth]").length;i++){
- $("input[name=threeth]").eq(i).prop("checked",false).parent("dd").hide();
- }
- }
- })
来源: http://www.jianshu.com/p/f9bf7256f049