JQ之CHECKBOX部分全选功能

来源：互联网发布：网络教育学历编辑：程序博客网时间：2024/06/05 00:07
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script src="http://code.jquery.com/jquery-latest.js"></script><title>JQ之CHECKBOX部分全选功能</title><body><div>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="shop" class="perm-all" data-group="shop">    商城管理 </label></div><div>  <label class="checkbox-inline" style="width:100px;">    <input type="checkbox" name="perms[]" value="shop.goods" class="perm-all-item" data-group="shop" data-child="goods">    <b> 商品</b> </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="shop.goods.view" class="perm-item" data-group="shop" data-child="goods" data-op="view">    浏览 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="shop.goods.add" class="perm-item" data-group="shop" data-child="goods" data-op="add">    添加 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="shop.goods.edit" class="perm-item" data-group="shop" data-child="goods" data-op="edit">    修改 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="shop.goods.delete" class="perm-item" data-group="shop" data-child="goods" data-op="delete">    删除 </label>  <br>  <label class="checkbox-inline" style="width:100px;">    <input type="checkbox" name="perms[]" value="shop.category" class="perm-all-item" data-group="shop" data-child="category">    <b> 商品分类</b> </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="shop.category.view" class="perm-item" data-group="shop" data-child="category" data-op="view">    浏览 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="shop.category.add" class="perm-item" data-group="shop" data-child="category" data-op="add">    添加 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="shop.category.edit" class="perm-item" data-group="shop" data-child="category" data-op="edit">    修改 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="shop.category.delete" class="perm-item" data-group="shop" data-child="category" data-op="delete">    删除 </label></div><div>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="member" class="perm-all" data-group="member">    会员管理 </label></div><div>  <label class="checkbox-inline" style="width:100px;">    <input type="checkbox" name="perms[]" value="member.member" class="perm-all-item" data-group="member" data-child="member">    <b> 会员</b> </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="member.member.view" class="perm-item" data-group="member" data-child="member" data-op="view">    浏览 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="member.member.edit" class="perm-item" data-group="member" data-child="member" data-op="edit">    修改 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="member.member.delete" class="perm-item" data-group="member" data-child="member" data-op="delete">    删除 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="member.member.export" class="perm-item" data-group="member" data-child="member" data-op="export">    导出 </label>  <br>  <label class="checkbox-inline" style="width:100px;">    <input type="checkbox" name="perms[]" value="member.group" class="perm-all-item" data-group="member" data-child="group">    <b> 会员组</b> </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="member.group.view" class="perm-item" data-group="member" data-child="group" data-op="view">    浏览 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="member.group.add" class="perm-item" data-group="member" data-child="group" data-op="add">    添加 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="member.group.edit" class="perm-item" data-group="member" data-child="group" data-op="edit">    修改 </label>  <label class="checkbox-inline">    <input type="checkbox" name="perms[]" value="member.group.delete" class="perm-item" data-group="member" data-child="group" data-op="delete">    删除 </label>  <br></div><script language="javascript">       $(function(){        $('.perm-all').click(function(){            var checked = $(this).get(0).checked;            var group = $(this).data('group');            $(".perm-item[data-group='" +group + "'],.perm-all-item[data-group='" +group + "']").each(function(){                $(this).get(0).checked = checked;            })        })        $('.perm-all-item').click(function(){            var checked = $(this).get(0).checked;            var group = $(this).data('group');            var child = $(this).data('child');            $(".perm-item[data-group='" +group + "'][data-child='" +child + "']").each(function(){                $(this).get(0).checked = checked;            })        });         $('.perm-item').click(function(){            var group = $(this).data('group');            var child = $(this).data('child');            var check = false;            $(this).closest('span').find(".perm-item").each(function(){                if($(this).get(0).checked){                     check =true;                     return false;                }            });            var allitem = $(".perm-all-item[data-group=" + group + "][data-child=" + child + "]");            if( allitem.length==1 ){                allitem.get(0).checked = check;            }           $(".perm-all[data-group=" + group + "]").get(0).checked = check;                    });            })    </script></body></html>
1 0