简单js效果求教

怎么样使已经排列好的一堆复选框中被选中的自动靠前？
比如：现在页面有五十个复选框，我要使鼠标点击复选框选中后这一项自动向前排列？？？？怎么做？求教！求详细思路……

解决方案 »

  1.   

    傻瓜办法，当复选框触发点击事件时，调用方法。
    该方法做两件事，
    1.将当前页面上所有被选中的复选框的html追加到一个变量中。
    2.将当前页面上所有未被选中的复选框的html追加到该变量中。输出。。
      

  2.   

    1.复选框有点击事件。用JQ给所有有同样CLASS的复选框加上点击事件处理函数。
    2.在处理函数里，取当前控件的显示文本值，和群组中第一个未选中的控件的显示文本对调，并更改这两个控件的CHECKED属性就行了。
      

  3.   

    简单思路：
    1、获取当前复选框的点击事件
    2、遍历所有的复选框，在第一个未选中状态的复选框之前插入当前元素或直接在第一个复选框之前插入元素
    3、删除当前选中的复选框
    以下是jQuery的实现的简单方法，仅仅调用了before()方法，楼主可以在此基础上做扩展<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>netone</title>
            <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
            <script type="text/javascript">
                $(function(){
                    for(var i = 0;i < 50;i++){
                        var checkbox = "<input type='checkbox' id=" + i + "/>";
                        $('body').append(checkbox);
                    }
                    $(':checkbox').click(function(){
                        //获取当前的状态
                        var flag = $(this).get(0).checked;
                        //当前是选中状态并且不是第一个复选框
                        if(flag && $(this).prev().is(':checkbox')){
                            //获取复选框的格式
                            var count = $(":checkbox").size();
                            for(var i = 0;i < count;i++){
                                if(!$(":checkbox").get(i).checked){
                                    //在第一个位置处插入
                                    $($(":checkbox").get(0)).before($(this));
                                    //在第一个未选中的复选框之前插入
                                    //$($(":checkbox").get(i)).before($(this));
                                    break;
                                }
                            }
                        }
                    })
                })  
            </script>
        </head>
        <body>
        </body>
    </html>