前台特效（7) 左右选框 

<!--Before finding the right people, the only need to do is to make yourself good enough. longDD 201.4.11-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>左右选择框</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .box{
                width: 200px;
                min-height: 300px;
                border: solid 3px #ccc;
                margin: 40px;
                border-radius:5px;
                float: left;
            }
            #box-footer{
                width: 800px;
                min-height: 80px;
                padding: 10px;
            }

            .btn{
                text-align: center;
                color: #fff;
                display: block;
                height: 30px;
                line-height: 30px;
                width: 100px;
                border: solid 1px #303030;
                background-color: #313131;
                border-radius:5px;
                margin: 10px;
            }

            .send-pos{
                width:150px;
                margin-left: 20px;
                margin-top: 10px;
                line-height: 30px;
                display: block;
            }

        </style>
    </head>
    <body>
        <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
        <script type="text/javascript">
            $(function() {
                //加入
                $('#add').click(function() {
                    var arr = $('#box-left :input[checked="checked"]');
                    for (var i = 0; i < arr.length; i++) {
                        if (!$('#box-right :input').is('[name=' + $(arr[i]).attr('name') + ']')) {
                            $('<li>', {html: $($(arr)[i]).parent().html()}).appendTo('#box-right ul');
                        }
                    }
                });
                //删除
                $('#del').click(function() {
                    var arr = $('#box-right :input[checked="checked"]');
                    for (var i = 0; i < arr.length; i++) {
                        $($(arr)[i]).parent().remove();
                    }
                });
                //清空
                $('#empty').click(function() {
                    $('#box-right ul').html('');
                });
            })
        </script>
        <div class="box" id="box-left">
            <ul>
                <li class="cont"><input type="checkbox" name='position1'/><span>1.部门1</span></li>
                <li class="cont"><input type="checkbox" name='position2'/><span>2.部门2</span></li>
                <li class="cont"><input type="checkbox" name='position3'/><span>3.部门3</span></li>
                <li class="cont"><input type="checkbox" name='position4'/><span>4.部门4</span></li>
                <li class="cont"><input type="checkbox" name='position5'/><span>5.部门5</span></li>
                <li class="cont"><input type="checkbox" name='position6'/><span>6.部门6</span></li>
            </ul>
        </div>
        <div class="box">
            <span class="btn" id="add">加入-》</span>
            <span class="btn" id="del">《-删除</span>
            <span class="btn" id="empty">清空</span>
        </div>
        <div class="box" id="box-right">
            <ul>
            </ul>
        </div>
        <div class="box" id="box-footer">
            注意事项：
            1.jquery 版本为1.7
            2.本例为简单测试，但是大体思路已完成，如有其他需求，可自行添加
            3.圆角border-radiu为css3属性，需要游览器支持

        </div>
    </body>
</html>

 

posted @ 2013-04-13 10:56  我叫龙弟弟  阅读(236)  评论(0)    收藏  举报