Jquery之复选框 全选or全不选

    虽然并不复杂,为了方便使用,存在此处方便复制粘贴。蓝色字体为代码部分:

   主复选框 id="fcheck" onclick="javascript:checkall(this)"
    子复选框 onclick="javascript:fchk()" 所有子复选框外层有个id="list"的节点
    
    function checkall(checkbox) {//全选 or全不选
            $("#list input[type=checkbox]").prop('checked', $(checkbox).prop('checked'));
        //id=list元素 下所有type=CheckBox也就是所有复选框,添加属性 checked,值为 id=checkbox元素当前checked值。
        //设置所有子复选框与主复选框相同

    }
    
    function fchk(){
        //   根据是否  全选/全不选  更改父checkbok状态
            var $subBox = $("#list input[type=checkbox]");
        //获取所有子复选框
            alert($("#list input[type=checkbox]:checked").length );
        //为了调试打印复选框的个数
               if($subBox.length == $("#list input[type=checkbox]:checked").length ){
            ?//如果选中的复选框与总数相等,则是全选状态,
            $("#fcheck").prop('checked','checked');
             //将主复选框设置为选中状态
                }else{
        //否则就代表未全选
                $("#fcheck").removeAttr("checked"); 
             ? //将主复选框设置为未选中状态
                }
    }

猜你喜欢

转载自blog.csdn.net/songxinfeng1989/article/details/81218549
今日推荐