读前笑一笑：
“老师，我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>
