纯JavaScripst的全选、全不选、反选【转】

<!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>&nbsp;<a href="javascript:void(0);" id="j-checkReverse">反选</a>&nbsp;<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>
纯JavaScripst的全选、全不选、反选 【转】

相关推荐

纯JavaScripst的全选、全不选、反选【转】
