checkbox全选和反选功能

用jQuery实现checkbox的全选和反选功能,当checkbox禁用时候不参与全选功能

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
        body{font:12px/1.5 Tahoma,'\5B8B\4F53',arial,Tahoma,helvetica,sans-serif;color:#333333;background-color:#ffffff;position:relative;}
        h1,h2,h3,h4,h5,h6{font-size:100%; font-weight: normal;}
        address,em{font-style:normal;}
        code,kbd,pre,samp{font-family:courier new,courier,monospace;}
        ul,ol{list-style:none outside none;}
        fieldset,img{border:0 none;}
        img{vertical-align:middle}
        table{border-collapse:collapse;border-spacing:0;font-size:inherit;*font-size:100%;}
        input,button,textarea,select{vertical-align:middle;font:100% Helvetica,Arial,sans-serif; color:inherit}
        input:focus{ outline:none;}
        .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}
        .clearfix{*zoom:1;}
        .clear{font-size:0;line-height:0;height:0;clear:both;visibility:hidden;overflow:hidden;}
        .disnone{display:none}
        .fontn{font-weight:400;}
        .ib{display:inline-block;*zoom:1;*display:inline;vertical-align:middle}
        .fl{ float: left;}

        .msgListBox{ width: 600px;}
        .orderCertBox table{ width: 100%;}

        .msgListBox li { border-bottom: 1px solid #ededed; height: 39px; line-height: 39px; margin: 0 19px 0 9px;  }
        .orderCertBox td{ vertical-align: top; }
        .msgListBox .trHover { border: 1px solid #ccc; border-right: 1px solid #fff; margin: -1px -1px 0; background: #fff; padding:0 20px 0 9px; position: relative; zoom:1; height: 38px; line-height:38px;*margin-top: -3px;}
        .msgListBox li div,.msgListBox li p{ float: left;}
        .msgListBox li span { color: #666; font-family: "Microsoft YaHei"; float: right;}
        .msgListBox li p{ width: 350px; height: 39px; overflow: hidden;font:14px/39px "Microsoft YaHei"; margin-left: 8px; display: inline; }

        .listTable{min-height: 400px; height: auto !important; height: 400px;}
        .msgListBox li div input{_margin-top:9px; }
        .msgListBox .noRead p{ font-weight: bold;}
        .msgListBox li i{ width: 14px; height: 12px; float:left;background: url("http://gcd.gcimg.net/i/201409/pdKQhZOO8I.png") no-repeat 0 -18px; margin-right: 2px; margin-top: 13px; overflow: hidden;}
        .msgListBox li a{ float: left; width: 330px; height: 39px; line-height: 39px; overflow: hidden;}
        .msgOper{ float: left; padding: 5px 0;}
        .msgOper input,.msgOper .offBtn{ float: left; line-height: 24px; }
        .msgOper input{ margin-top:15px;margin-left: 10px;*margin-top: 12px;}
        .operPage{ float: right;}
        .msgListBox .noRead i{ background-position: 0 0;  }
        .msgListBox  .trHover2{border: 1px solid #ccc;  margin: -1px -1px 0; background: #fff; padding:0 20px 0 9px; position: relative; zoom:1; height: 38px; line-height:38px;*margin-top: -3px; }

        .listTable .pageBox{ margin-right: 8px; display: inline;}
        .orderCertList .operPage{ margin-right: 10px; display: inline;}
        .msgListBox .trHover a{ }
        .systemCon a{ color: #0c77e4;}
        .systemCon a:hover{ text-decoration: underline;}
    </style>
</head>
<body>
<div class="listTable">
    <ul class="msgListBox">
        <li class="trHover delOb clearfix">
            <div><input type="checkbox" name="1" value="36389"> </div>
            <p><i></i><a href="/Inbox/Readmsg/pmid/36389">
                【系统】
                商品咨询待回复</a>
            </p>
            <span class="msgTime">2014-10-22 08:05</span>
        </li>
        <li class="trHover delOb clearfix">
            <div><input type="checkbox" name="2" value="36389"> </div>
            <p><i></i><a href="/Inbox/Readmsg/pmid/36389">
                【系统】
                商品咨询待回复</a>
            </p>
            <span class="msgTime">2014-10-22 08:05</span>
        </li>
        <li class="trHover delOb clearfix">
            <div><input type="checkbox" name="3" value="36389"> </div>
            <p><i></i><a href="/Inbox/Readmsg/pmid/36389">
                【系统】
                商品咨询待回复</a>
            </p>
            <span class="msgTime">2014-10-22 08:05</span>
        </li>
        <li class="trHover delOb clearfix">
            <div><input type="checkbox" name="4" value="36389"> </div>
            <p><i></i><a href="/Inbox/Readmsg/pmid/36389">
                【系统】
                商品咨询待回复</a>
            </p>
            <span class="msgTime">2014-10-22 08:05</span>
        </li>
        <li class="trHover delOb clearfix">
            <div><input type="checkbox" name="5" value="36389"> </div>
            <p><i></i><a href="/Inbox/Readmsg/pmid/36389">
                【系统】
                商品咨询待回复</a>
            </p>
            <span class="msgTime">2014-10-22 08:05</span>
        </li>

    </ul>
    <div class="clearfix">

        <div class="msgOper">
            <input class="selectAll" type="checkbox" selectAll="1 2 3 4 5">

        </div>

    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        var $body = $('body');
        $body.on('change', ':checkbox[selectAll]', function() {
            var _ckbox = $(this),
                _checked = _ckbox.prop('checked'),
                _ckboxs = _ckbox.attr('selectall').split(' ');
            $.each(_ckboxs, function(i, n) {
                $(':checkbox[name="'+n+'"]').not(':disabled').prop('checked', _checked);
            })
            $(":checkbox").not(_ckbox).on('change',function(){
                var _this = $(this);
                var checkedL = $(":checkbox:checked").not(_ckbox).length;
                var checkL = $(":checkbox").not(_ckbox).not(':disabled').length;
                if(_this.attr("checked",'disbaled')){
                    _ckbox.removeAttr("checked");
                }
                if(checkedL == checkL ){
                    _ckbox.prop('checked','true');
                } else{
                    _ckbox.prop('checked',false);
                }
            })
        });
    })

</script>
</html>
时间: 2024-10-06 16:23:22

checkbox全选和反选功能的相关文章

angular checkbox 全选和反选功能

最近做写出了angularjs 全选和反选的数据绑定功能,分享出来给大家,有什么不对的地方请大家多多指教,angularjs 强大的数据绑定功能完全展现了新一代的web 开发的,完美的和html 应用在一起,实现新一代的技术完美结合.废话就不多说了,下面看代码: 1.html 页面: <table class="table" >    <!--主机组主机列表-->    <tr style="background-color: #555555;c

checkbox 全选,反选 ,全不选

在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对列表进行循环检测,此时可以将所有的(无论之前什么状态),设为选中,也可对未选中的进行选中. 2. 反选:当反选checkbox被点击(不管点击之前是什么装填)后,获取其其状态值,对列表进行循环检测,将被检测的元素的checked状态反向处理,即可. 3. 列表全选或者不全选:当列表中的任意一个che

checkbox全选,反选,取消选择 jquery

checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ $(this).attr("checked",true); }); //checkbox取消全选 $(":checkbox[name='osfipin']").each(function(){ $(this).attr("checked",false

jquery实现全选和反选功能

jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置"checked"属性的值,true未选中,false为未选中,在整个全选.反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值. <ul id="list"> <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label>&l

练习-checkbox 全选 ,反选, 单选,以及取值

1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title> <meta http-equiv="Content-Type" content="te

Delphi实现DBGrid全选和反选功能

Delphi实现Dbgrid全选和反选.清除全选的功能,不管是在Delphi下,还是在WEB开发中,这种功能都是很实用的,是进行数据批量操作的基础.本模块就是实现了为Delphi的DBGrid数据列表增加全选内容.清除全选的功能,很实用了,代码内容如下: //全选 procedure TFrameCustSelector.ToolButton1Click(Sender: TObject); var OldCurrent: TBookmark; begin OldCurrent := DBGrid

Android实战简易教程-第五十一枪(ListView实现子控件的动态显示和隐藏、checkbox全选和反选)

前段时间写过一篇文章:Android实战简易教程-第四十七枪(ListView多选-实现点餐系统)有的同学留言建议,可不可以动态控制checkbox的显示和全选反选功能,我研究了一下,发现实现也比较容易,特写下此篇文章.学习就是要有发散思维,要举一反三,大家也可以根据我的实例进行改编,添加和删除一些功能,这样可以提高你对知识的认知!下面我们看一下代码: 1.main.xml: <?xml version="1.0" encoding="utf-8"?>

html checkbox 全选与反选

之所以记录这个博客,是因为我完全用jquery,无法实现自己想要的结果(通过一个checkbox的选中或不选中控制其他多个checkbox状态) <input type="checkbox" name="test" />圣诞节 <input type="checkbox" name="test" />股市 <input type="checkbox" name="te

js CheckBox 全选、反选

<h3>你最喜欢的水果是?</h3> <label><input type="checkbox"/>苹果</label> <label><input type="checkbox"/>香蕉</label> <label><input type="checkbox"/>梨</label> <label>&l