标签：checkbox select 重构 前端 javascript
用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 select 重构 前端 javascript
原文地址：http://blog.csdn.net/lfcss/article/details/40377205
