php之三态checkbox

<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);
            }
        }

  

时间: 2024-08-29 15:54:57

php之三态checkbox的相关文章

QTreeView三态checkbox代码

 /*----------------------------------- * * Class PermissionTreeView * *-----------------------------------*/ class PermissionTreeView : public QTreeView { Q_OBJECT public: explicit PermissionTreeView(QWidget *parent = 0); ~PermissionTreeView(); voi

[ ObjectListView ] - ListView的增强控件 - 前言 (翻译)

********************************************************************************** 原  标 题: A Much Easier to Use ListView 原文地址: https://www.codeproject.com/Articles/16009/A-Much-Easier-to-Use-ListView 翻       译: 于国栋 http://www.shannon.net.cn *********

wxPython CheckBox类

一个复选框显示一个小标记的矩形框.单击时,复选标记出现在矩形内,指示作出选择. 复选框优于单选按钮,当允许用户多选.在这种情况下,第三状态称为混合或不确定的状态,一般用在"不适用"情景. 通常情况下,一个复选框对象有两种状态(选中或未选中).如果相应的参数将被赋予三态复选框也可以构造. wx.CheckBox类的构造函数的参数如下 - Wx.CheckBox(parent, id, label, pos, size, style) 以下样式参数值可以使用 - S.N. 参数和说明 1

Flex tree加三状态的Checkbox

网上有下过其它人的实现的样例.可是样式不好改.还有就是不能初始化选中,还有三态效果那个半选中状态也是不清楚.所以自己依据Itemrender搞了一个,还凑合 效果如图:全选和半选状态,Checkbox的flex3的样式用的图片 TreeCheckboxItemRender.mxml <? xml version="1.0" encoding="utf-8"?> <s:MXTreeItemRenderer xmlns:fx="http://

Android ExpandableListView 带有Checkbox的简单应用

expandablelistview2_groups.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height=&qu

自定义input[type=&quot;checkbox&quot;]的样式

对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式. 很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbox"] 一起使用.当<label>元素与复选框关联之后,也可以起到触发开关的作用. 思路:

checkbox管理

这是我写的关于checkbox的管理的方法: 主要目的是1.管理checkbox全选,单个选的状态:(例如当所有的单个选框都选中时,全选框的状态应该是选中,) 2.选中,取消选中时更新数据: 目的: 实现批量操作(批量删除,批量修改)时的状态管理: 并不完善:而且感觉这样做不好:但是技术有限,想不出其他方法了: 如果哪位大神路过,还望指导一下. <!doctype html> <html lang="en"> <head> <meta char

winform checkbox Checked属性与CheckedChanged事件的关系

注意 當 AutoCheck 屬性為 true (預設值) 時,當按一下 CheckBox 時,它便會自動選取或取消選取.否則,您必須在發生 Click 事件時,手動設定 Checked 屬性.https://msdn.microsoft.com/zh-tw/library/aa983710(v=vs.71).aspx

Jquery实际应用,判断radio,selelct,checkbox是否选中及选中的值

jquery取radio单选按钮的值 $("input[name='items']:checked").val(); 另:判断radio是否选中并取得选中的值 如下所示: function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){ alert("yes--选中的值为:"+$(":radio:checked")