JQ之CHECKBOX部分全选功能

最新推荐文章于 2021-08-16 15:16:05 发布
最新推荐文章于 2021-08-16 15:16:05 发布
阅读量512 收藏
点赞数 1
分类专栏： WEB前端 文章标签： JQ CHECKBOX 全选功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/netuser1937/article/details/54969150
版权 

<!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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery checkbox的全选功能
qq_44829011的博客
05-23 481
功能 点击首个CheckBox 对下面三个CheckBox的checked（选中状态）值赋值 下面的三个CheckBox被点击改变首个CheckBox的checked 使用jq中的 prop 查看选中状态checkbox.prop(‘checked’); 修改选中状态checkbox.prop(‘checked’,false); 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &
jq checkbox 的全选并ajax传参的实例
08-30
本实例将探讨如何使用jQuery实现复选框（checkbox）的全选功能，并结合Ajax进行参数传递，以便在用户做出选择后更新服务器上的数据。 首先，`#all`是一个复选框，用于控制所有其他复选框的状态。当用户点击这个全选...
jquery实现checkbox的全选和全不选
10-18
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
jq 实现CheckBox全选
Leo的博客
09-05 587
jq 实现CheckBox全选<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"
jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选
wpydaguan的专栏
05-21 1963
本文章总结jQuery实现checkbox三种情况的全选功能 第一种：等值全选，也称name的等值全选，通过checkbox的名称name实现。 第二种：模糊全选，也称id模糊全选，通过checkbox的id或value值实现。 第三种：值范围全选，也称value值范围全选，通过checkbox的value值实现，或者截取id数字后缀范围判断实现。 等值全选 在工作中
jquery checkbox部分全选
jiangquan1982的专栏
05-08 901
New Document http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">>$(document).ready(function() { $("input[name=Btype]").click(function() {if($(this).attr("checked") == true){ $("input[cla
JQ checkbox 全选和全不选
06-10
"JQ checkbox 全选和全不选"这个主题聚焦于jQuery如何实现复选框的选择功能，特别是全选和全不选的交互效果。这种功能常见于数据表格或列表的筛选中，允许用户一次性选择或取消选择所有项目。 首先，我们需要了解...
jquery操作checkbox实现全选和取消全选
12-11
今天这样写了一个全选和取消全选的功能： 全选：$(“:checkbox”).attr(“checked”,”checked”); 取消全选：$(“:checkbox”).removeAttr(“checked”); 获取选中的：$(“:checked[checked=’checked’]”) 发现点...
jquery数组之存放checkbox全选值示例代码
01-19
全选/全部不选 <input type=”checkbox” name=”items” value=”1″>1 <input type=”checkbox” name=”items” value=”2″>2 <input type=”checkbox” name=”items” value=”3″>3 <...
jquery写个checkbox——类似邮箱全选功能
12-10
最近在学习jquery，今天抽空用jquery 写个checkbox——类似邮箱全选功能。 代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title>checkbox</...
购物车的全选，全不选，局部全选，全选判定
11-11
购物车的全选，全不选，局部全选，全选判定
jquery实现checkbox全选、取消全选
03-05 109
<input type="checkbox" name="checkbox_name[]” id=”checkbox_name_1″ />1<br /> <input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_2″ />2<br /> <input type=...
jQuery checkbox全选
cychai的专栏
10-13 1360
通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。 使用click事件，根据checked属性进行判断即可。 示例： $("#chkRreviewOffline").click(function(){ if(this.checked){ $('#review-offline .btn_
checkbox全选或部分选
coxf45246896的博客
04-07 111
function checkall(obj1){//选择表单内的所有多选按钮 var temp=0; var obj=document.form1; for(var i=0;i { var e=obj.elements[i];...
jQuery实现CheckBox全选
Lockey23的博客
05-14 5442
关于jQuery实现CheckBox全选只能生效一次的问题 这代码只有一次全选、全不选的效果 第三次点击checkall会没有任何效果 $("#checkall").click(function(){ $('input[name="check"]').attr("checked",this.checked); }); 使用prop才能实现每次点击都能达到预期效果 ...
checkbox的全选
qq_38919899的博客
10-09 348
1.先写一个html页面，里面写一个全选按钮和几个复选框，实现下面2个要求 （1）点击全选按钮选中时，所有的复选框选中. （2）点击全选按钮取消选中时，所有复选框取消选中。
jQuery实现checkbox全选功能
KobeSacre的博客
03-10 1300
// 实现全选功能 $("#summaryBox").click(function() { // 查看当前全选是否被选中 var status = this.checked; // 根据status来设置其他多选框的状态 $(".itemBox").prop("checked", status); }); // 当本页所有用户被选中时，全选会自动选中 $("#rolePageBody").on("click", ".itemBox", funct
jquery操作checkbox，实现全选。
memory0401的博客
10-28 162
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="serve
jquery实现checkbox全选功能
影子
08-16 555
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery3.6.0.js"></script> </head> <body> <table> ，<thead> <tr> ...
jq实现checkbox全选全不选
最新发布
05-23
你可以使用以下的代码来实现checkbox全选/全不选的功能： ```javascript // 全选/全不选 $('#all').click(function() { $('input[name="checkbox"]').prop('checked', this.checked); }); // 单个checkbox点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值