zoukankan      html  css  js  c++  java
  • 复选框的子级和父级间的逻辑

    a.父级选中 子级都选中

    b.子级一个选中 父级就选中

    c.全选或者全部选中

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 

    <script type="text/javascript">
    $(function(){
    $("#checkedAll").click(function(){
    var flag = this.checked;
    $(":checkbox[name='items']").attr("checked", flag);
    });

    $(":checkbox[name='items']").click(function(){
    var _cbClass = $(this).attr('class'); //获取父级的class元素
    if(_cbClass){//判断是否有元素,有的话则是父级复选框
    var _isChecked = $(this).is(":checked"); //获取是否选中
    $(":checkbox[pid='"+_cbClass+"']").attr("checked",_isChecked);//根据父级是否选中的状态设置子级的状态
    }else{//操作子级复选框
    var _pid = $(this).attr('pid');//获取pid的值
    if($("input[pid="+_pid+"]").is(":checked")==true){
    $(":checkbox[class='"+_pid+"']").attr("checked",true);//判断子级是否有选中,有的话父级选中
    }else{
    $(":checkbox[class='"+_pid+"']").attr("checked",false);
    }
    }

    });


    });

    </script>

    html部分:

    <body>

    <form method="post" action="">
    <div style="margin-left:30px;">权限设置
    <input type="checkbox" id="checkedAll" />全选/全不选
    <div style="border:solid 1px #ebebeb; padding-left:70px; padding-top:20px; margin-top:15px;">

    <input type="checkbox" name="items" class="id_1"/><span style="font-size:18px; color:#36F;">广州</span>
    <ul>
    <li><input type="checkbox" name="items" pid="id_1"/>白云区</li>
    <li><input type="checkbox" name="items" pid="id_1"/>越秀区</li>

    </ul>


    <input type="checkbox"name="items" class="id_2" /><span style="font-size:18px; color:#36F;">北京</span>
    <ul>
    <li><input type="checkbox" name="items" pid="id_2"/>白云区</li>
    <li><input type="checkbox" name="items" pid="id_2"/>白云区</li>
    </ul>
    </div>
    </div>
    </form>

    </body>

  • 相关阅读:
    @当你输入一个网址的时候,实际会发生什么?
    @Java魔法类——unsafer应用解析
    !@面试官:说说双亲委派模型?
    @JAVA字符串格式化
    @double精度比float低吗?
    @java类中资源加载顺序
    !@阿里资深架构师浅谈一个Java类的生命周期
    @String对象的那些事,几行代码就解释得清清楚楚
    @final、finally、finalize有什么区别?
    @35个Java代码优化的细节,你知道几个?
  • 原文地址:https://www.cnblogs.com/hFannie/p/4565532.html
Copyright © 2011-2022 走看看