正文
代碼如下：
<!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>