网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

原生js全选、全不选、反选特效

关注我吧
 2014/3/24 9:25:03 阅读次数:2841

原生js版全选、取消全选、反选效果。

效果图如下:

原生js全选、全不选、反选特效

源代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js全选、全不选、反选特效</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="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="checkAll"/>全选</label> <a href="javascript:void(0);" id="checkReverse">反选</a> <a href="javascript:void(0);" id="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("itemBox"),//包含checkbox的父级图片的ID
        aItems : document.getElementsByName("item"),//所有checkbox中name为item
        oCheckAll : document.getElementById("checkAll"),//全选按钮的ID
        oCheckReverse : document.getElementById("checkReverse"),//反选按钮的ID
        oCheckOk : document.getElementById("checkOk")//确认选中的按钮ID
    });
    myCheck.init();
</script>
</body>
</html>

结论:

封装使用起来比较方便,只需要按照简单的几步就可以实现!


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭