js实现翻页保持checkbox勾选状态的实现-百分百源码网

js实现翻页保持checkbox勾选状态的实现

发布时间：01/15 来源：浏览：关键词：

一般情况下js点击选中的内容如果页面刷新或翻页都会消失了，下面我来介绍一个实现翻页保持checkbox勾选状态，各位朋友可参考。

实现原理：

每一个分页都包含在一个id为page+页码的div中，翻到其他页时，隐藏当前页，首先判断目标页是否已经加载过，如果没有就通过ajax去获取页面，同样包含在一个page+页面的div中，等于说所有的分页都在页面中，只不过非当前页的div都设为display=none了，所以细心的你可能会发现加载过的页面再加载怎么会那么快啊。

核心的部分就是这个javascript函数：

代码如下

// 显示分页，传进去分页页码
function show_search_page(page_num)
{
    // 首先判断目标页是否已经加载过，加载过的话就把其他页都设定隐藏再把当前页显示，然后结束返回
    if ($chk($('page'+page_num)))
    {
        $('song_div').getElements('div[id^=page]').each(function(item,index){$(item).setStyle('display','none');});
        $('page'+page_num).setStyle('display','block');
        return;
    }

   // 如果没有加载过，就通过ajax去获取页面数据，然后生成一个page+页面的div，并显示出来
    var search_song_with_ajax = new Ajax('./getsearchdata.php?cur_page=' + page_num + '&key={_$search_key_}',
    {method: 'get',
    onComplete: function(){
        $('song_div').getElements('div[id^=page]').each(function(item,index){$(item).setStyle('display','none');});
        var new_div = new Element('div',{
            'id':'page'+page_num
        });
        $(new_div).setHTML(this.response.text);
        $(new_div).injectInside('song_div');
    }
    }).request();
}

javascript的代码可以到页面去查看，hope it usefull for you

打赏