全选、全不选、反选

读前笑一笑:

“老师,我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>&nbsp;<a href="javascript:void(0);" id="j-checkReverse">反选</a>&nbsp;<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>

 

你可能感兴趣的:(全选)