“老师，我11岁，想问一个问题。”“你好，想问神马？”“基友和炮友有什么不同啊？”
老师顿时觉得一种来自祖国未来的压力……
然后老师想了想很认真地回答他：“基友就是一起吃肯德基的朋友，pao友就是一起吃泡面的朋友。前者注重交流，后者注重效率。”
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【JavaScripst效果】全选、全不选、反选</title>
<style>
html, body, h2, ul, p { margin: 0; padding: 0; }
ul { list-style: none; }
h2 { font-size: 100%; text-indent: 5px; }
input { vertical-align: -2px; *vertical-align: -1px; }
.m-box { width: 400px; border: 1px #666 solid; margin: 0 auto; font: 12px/30px 'microsoft yahei'; }
.m-box .hd,.m-box .ft { background-color: #ccc; }
.m-box .bd { overflow-x: hidden; overflow-y: auto; position: relative; height: 120px; }
.m-box .bd li label { display: block; height: 30px; vertical-align: top; }
</style>
</head>
<body>
<div class="m-box">
<h2 class="hd">选择列表</h2>
<ul class="bd" id="j-itemBox">
<li><label><input type="checkbox" name="item" value="1"/>选项1</label></li>
<li><label><input type="checkbox" name="item" value="2"/>选项2</label></li>
<li><label><input type="checkbox" name="item" value="3"/>选项3</label></li>
<li><label><input type="checkbox" name="item" value="4"/>选项4</label></li>
<li><label><input type="checkbox" name="item" value="5"/>选项5</label></li>
<li><label><input type="checkbox" name="item" value="6"/>选项6</label></li>
<li><label><input type="checkbox" name="item" value="7"/>选项7</label></li>
<li><label><input type="checkbox" name="item" value="8"/>选项8</label></li>
<li><label><input type="checkbox" name="item" value="9"/>选项9</label></li>
<li><label><input type="checkbox" name="item" value="10"/>选项10</label></li>
</ul>
<p class="ft"><label><input type="checkbox" id="j-checkAll"/>全选</label> <a href="javascript:void(0);" id="j-checkReverse">反选</a> <a href="javascript:void(0);" id="j-checkOk">确定</a></p>
</div>
<script>
function Check(options){
this.oItemsBox = this.getById(options.oItemsBox);
this.aItems = this.getByName(options.aItems);
this.oCheckAll = this.getById(options.oCheckAll);
this.oCheckReverse = this.getById(options.oCheckReverse);
this.oCheckOk = this.getById(options.oCheckOk);
// 初始化
this.init.apply(this);
}
Check.prototype = {
init: function(){
var that = this;
// 根据选项更新全选
this.oItemsBox.onclick = function(e){
var ev = e || window.event, target = ev.target || ev.srcElement;
if(target.tagName.toLowerCase() === "input"){
that.checkReverse(that);
}
};
// 全选操作
this.oCheckAll.onclick = function(){
that.checkAll();
};
// 反选操作
this.oCheckReverse.onclick = function(){
that.checkReverse(that, true);
};
// 确定
this.oCheckOk.onclick = function(){
var test = that.checkReverse(that);
alert("您选择了value是：【"+test+"】的选项！");
};
},
// 获取ID
getById: function(id){
return document.getElementById(id);
},
// 获取Name
getByName: function(name){
return document.getElementsByName(name);
},
// 全选/全不选
checkAll: function(){
for(var i = 0, len = this.aItems.length; i < len; i++){
this.aItems[i].checked = this.oCheckAll.checked;
}
},
// 根据选项更新全选
checkReverse: function(that, isReverse){
for(var i = 0, n = 0, arr = [], len = that.aItems.length; i < len; i++){
if(isReverse){
that.aItems[i].checked = !that.aItems[i].checked;
}
if(that.aItems[i].checked){n++;arr.push(that.aItems[i].value)}
}
that.oCheckAll.checked = len == n;
return arr;
}
};
// 实例化
new Check({
oItemsBox: 'j-itemBox', // 盒子ID
aItems: 'item', // checkbox选项Name
oCheckAll: 'j-checkAll', // 全选ID
oCheckReverse: 'j-checkReverse', // 反选ID
oCheckOk: 'j-checkOk' // 确定ID
});
</script>
</body>
</html>
