码迷,mamicode.com
首页 > Web开发 > 详细

php之三态checkbox

时间:2014-11-19 18:32:24      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   os   sp   java   on   

<div class="pnav-box" id="letter-a">
  <
div class="box-title">
    <
a class="btn-unfold" data-power="icon" data-v="close" href="javascript:;"></a>
    <
input data-checkbox="all" type="checkbox" value="1" name="power[]" id="power" />
    <
span class="pnav-letter">采购</span>
  </
div>
  <
ul class="box-list clear">
    <
li>
      <
a class="btn-fold" data-power="icon" data-v="open" href="javascript:;"></a>
      <
b>
        <
input data-checkbox="items" type="checkbox" value="1" name="power[]" id="power" /><a href="javascript:;">采购管理</a>
      </
b>
      <
h2 class="hide">
        <
input value="020101" id="cb020101" data-checkbox="item" type="checkbox" name="power[]" /><a href="javascript:;">下订单</a>
      </
h2>
      <
h2 class="hide">
        <
input value="020102" id="cb020102" data-checkbox="item" type="checkbox" name="power[]" /><a href="javascript:;">支付</a>
      </
h2>
    </
li>
  </
ul>
</
div>
$("[data-checkbox=all]").change(function() {
        //子类全部操作
        $(this).parent().next().find(":checkbox").prop("checked",this.checked);
    });
    $("[data-checkbox=items]").change(function(){
        var p = $(this).parent().parent();
        var checkedNum = p.parent().find("[data-checkbox=items]:checked").length;   //获取被选中的状态
        var allNum = p.parent().find("[data-checkbox=items]").length;   //获取所有数量的状态
        if(checkedNum == allNum){    //当被选中的数量等于总的数量时,则全选
            p.parent().parent().find("[data-checkbox=all]").prop(‘indeterminate‘,false);    //去掉半选状态,
            p.parent().parent().find("[data-checkbox=all]").prop(‘checked‘,true);   //加上全选状态
        }else if((checkedNum < allNum) && (checkedNum > 0)){
            p.parent().parent().find("[data-checkbox=all]").prop(‘checked‘,false);  //去掉全选状态
            p.parent().parent().find("[data-checkbox=all]").prop(‘indeterminate‘,true); //加上半选状态
        } else {
            p.parent().parent().find("[data-checkbox=all]").prop(‘indeterminate‘,false);    //去掉半选状态,
            p.parent().parent().find("[data-checkbox=all]").prop(‘checked‘,false);  //去掉全选状态
        }
        p.find(‘[data-checkbox=item]‘).prop(‘checked‘,this.checked);
    });
    $(‘[data-checkbox=item]‘).change(function(){
        var p = $(this).parent().parent();
        var checkedNum = p.find(‘[data-checkbox=item]:checked‘).length; //获取被选中的状态
        var allNum = p.find(‘[data-checkbox=item]‘).length; //获取所有数量的状态
        if(checkedNum == allNum){
            p.find(‘[data-checkbox=items]‘).prop(‘indeterminate‘,false);
            p.find(‘[data-checkbox=items]‘).prop(‘checked‘,true);
            if(p.parent().find("[data-checkbox=items]").length == p.parent().find("[data-checkbox=items]:checked").length) {
                p.parent().parent().find("[data-checkbox=all]").prop(‘indeterminate‘,false);    //去掉半选状态,
                p.parent().parent().find("[data-checkbox=all]").prop(‘checked‘,true);   //加上全选状态
            }
        }else if((checkedNum < allNum) && (checkedNum > 0)){
            p.find(‘[data-checkbox=items]‘).prop(‘checked‘,false);
            p.find(‘[data-checkbox=items]‘).prop(‘indeterminate‘,true);
            p.parent().parent().find("[data-checkbox=all]").prop(‘indeterminate‘,true);
        } else {
            p.find(‘[data-checkbox=items]‘).prop(‘checked‘,false);
            p.find(‘[data-checkbox=items]‘).prop(‘indeterminate‘,false);
            if(p.parent().find("[data-checkbox=items]:checked").length == 0) {
                p.parent().parent().find("[data-checkbox=all]").prop(‘indeterminate‘,false);
                p.parent().parent().find("[data-checkbox=all]").prop(‘checked‘,false);
            }
        }

  

php之三态checkbox

标签:style   blog   io   ar   color   os   sp   java   on   

原文地址:http://www.cnblogs.com/liuwz/p/4108712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!