<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>【JavaScripst效果】全选、全不选、反选</title> <style> 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> /* by jununx@gmail.com */ function Check(options){ this.oItemsBox = options.oItemsBox; this.aItems = options.aItems; this.oCheckAll = options.oCheckAll; this.oCheckReverse = options.oCheckReverse; this.oCheckOk = options.oCheckOk; } 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+"】的选项！"); }; }, //全选/全不选 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; } }; //实例化 var myCheck = new Check({ oItemsBox : document.getElementById('j-itemBox'), aItems : document.getElementsByName('item'), oCheckAll : document.getElementById('j-checkAll'), oCheckReverse : document.getElementById('j-checkReverse'), oCheckOk : document.getElementById('j-checkOk') }); myCheck.init(); </script> </body> </html>