使用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>

版权声明：本文博客原创文章，博客，未经同意，不得转载。

checkbox 选择功能和反选的更多相关文章

  1. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理

    近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...

  3. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  4. checkbox 全选反选实现全代码

    //跳转到指定action function validateForm(url){ if($("#form").form('validate')){ var x=document. ...

  5. C# WinForm中实现CheckBox全选反选功能

    今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...

  6. 表单Checkbox全选反选全不选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jquery checkbox点选反选

    <script type="text/javascript"> $(function(){ //点选反选 $("#check_all").click ...

  8. Jquery学习笔记（4）--checkbox全选反选

    可能有浏览器兼容性,注意html里的checked是一个属性,存在就默认选中. <!DOCTYPE html> <html lang="en"> <h ...

  9. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

随机推荐

  1. UML造型——使用EA时序图工具的开发实践和经验

    Enterprise Architect watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3l3NzE=/font/5a6L5L2T/fontsiz ...

  2. Cordova WP8 插件开发

    原文:Cordova WP8 插件开发 前面博客中介绍了Cordova WP8平台上的安装部署,Cordova扩展可以利用WP8本地代码扩展WebApp的功能,调用本地能力需要开发相应的插件,下面以闪 ...

  3. Run Book Automation - RBA系统介绍

    什么是RBA系统? 介绍这个系统之前, 先介绍一下开发这个系统的公司. BMC BMC软件公司是全球率先的业务服务管理解决方式的开发及供应商,现为全球第六大独立软件公司. 通过帮助用户主动提升服务.降 ...

  4. Android使用代码消除App数据并重新启动设备

    /** * 使用代码消除App数据 * 我们不寻常的清除App数据,中找到相应的App * 然后选择其清除数据.以下给出代码实现. * * 注意事项: * 1 设备须要root * 2 该演示样例中删 ...

  5. ServletRequest接口召回总结

    <body> <form action="LoginServlet" method="post"> User:<input typ ...

  6. POSIX 螺纹具体解释（1-概要）

    线程是有趣的 线程类似于进程.如同进程,线程由内核按时间分片进行管理.在单处理器系统中,内核使用时间分片来模拟线程的并发运行.这样的方式和进程的同样. 而在多处理器系统中,如同多个进程.线程实际上一样 ...

  7. javascript小白学习指南0---1

    引言: 做为一名程序猿.都是真心的想把自己的东西分享出来,供大家一起学习探讨.一起提高技能.一起涨工资,呵   这一系列的文章都是关于Javascript 基础的 当然文章其中穿插了些我自己的理解.希 ...

  8. Oracle经常使用函数

    Oracle经常使用函数 --TRUNC,TO_DATE,TO_CHAR,TO_NUMBER, SUBSTR,REPLACE.NVL .TRIM,wm_concat,upper, lower,leng ...

  9. Rabbitmq 加入用户訪控制台(guest无法登陆控制台问题)

    对于rabbitmq的guest用户无法訪问控制台的问题,是由于rabbitmq做了安全措施,禁止guest登陆控制台.须要我们自己创建用户进行登陆 1,运行加入用户命令 rabbitmqctl ad ...

  10. VisualC++2012 Compiler Warning C4566

    现象: 今天敲代码突然遇到这样一个警告: warning C4566: ユニバーサル文字名 '\u0642' によって表示されている文字は.現在のコード ページ (932) で表示できません 意思是说 ...