js實作翻頁後保持checkbox選取狀態的實作方法_javascript技巧

專案中的分頁使用真分頁，每次點擊上下頁按鈕後，再次呼叫後台方法查詢，重新刷新此頁面。所以checkbox為false。

例如酷狗音樂中，上下頁選取的歌曲不會保留，只能在每頁選擇新增後，再切換下頁。

但是專案中有需求，所以只能完成實作。

專案具體的需求如下：給角色授權時，選擇模組以及模組下的操作，點選上下頁後選取的checkbox不變。

介面如下：

實現的思路如下：

在介面中，使用純js完成。把選取的checkbox中的id，其中包括模組id，操作id，拼接成一個字串，然後把字串傳遞到action中。

每次呼叫此頁面時，首選呼叫action中的選取的id字串，然後根據在id字串的基礎上，再次拼接本介面中選取的id。選取的checkbox，需要判斷，若不在id容器中，則載入進來；未選取的checkbox，需要判斷，若原來在id容器中，則需要刪除；

在頁面完全載入完畢後，介面中checkbox與拼接的id字串容器進行比較，若在字串容器中，在checkbox自動勾選。否則為false。

提示說明：

因為本思路是把拼接的id當作字串，則在js中取得action中的選取的id字串時，需要注意語法。

思路實作程式碼如下：

java中取得action的id容器：

複製程式碼 程式碼如下:

程式碼如下:


ids= (String)request.getAttribute("ids");

if((ids==null)){
ids="";
}

js程式碼: 上一頁函數：

複製程式碼

程式碼如下:


function 代碼如下:


function _pref >{
var ids="";
var checkedIds= new String(ids);

var modules = document.getElementsByName("module");
var operates = document.getElementsByName("operate");

for ( var i = 0; i if (modules[i].type == "checkbox" && modules[i].checked) {
if(checkedIds.indexOf(modules[i].value)==-1){
checkedIds=checkedIds modules[i].value ",";
}
//判斷模組下的操作
for ( var j = 0; j var operateId = new String(operates[j].id);
operateId = operateId.substring(0, operateId.indexOf(","));
if (modules[i].value == operateId) {
if (operates[j].type == "checkbox" && operates[j].checked) {
if(checkedIds.indexOf(operates[j].value)==-1){
checkedIds=checkedIds operates[j].value ",";
}
}

if(operates[j].checked==false){
if(checkedIds.indexOf(operates[j].value)!=-1){
checkedIds =checkedIds.replace((operates[j].value ","),"");
}
}
}
}
}

if(modules [i].checked==false){
if(checkedIds.indexOf(modules[i].value)!=-1){
checkedIds=checkedIds.replace((modules[i].value ", "),"");
}
}
}

with(document.forms[0])
{
action="roleAuthoriedManager!getModuleOperateBySystem?role "
document.getElementById("roleId").value
"&systemId=" document.getElementById("systemId").value
"&pageNo=" "&queryString=" document.getElementById("searchById").value
"&ids=" checkedIds;

method="post";
submit();
}

} } 在介面完全載入完畢後js程式碼如下：

複製程式碼


程式碼如下:



程式碼如下:



程式碼如下:


document.onreadystatechange=statechange;
function statechange()
{
var ids="";
var checkedIds= new String(ids)
if(document.readystate="complete")
{
//循環所有的控制

var inputs=document.getElementsByTagName("input"); for(var i=0; i{ if(inputs[i].type=="checkbox") { if(checkedIds.indexOf(inputs[i].value)! =-1) { inputs[i].checked=true; } } } } }
說明：在做測試時，但是一直提示，函數未定義，不僅提示下頁函數未定義，凡是介面上所有的按鈕全部提示未定義。所以糾結了很久。解決後，拿出分享下。
遇到這種情況，一定是頁面上有錯誤。 jsp解析成html後，html頁面一定有文法問題，導致這個html頁面無法解析。
開始的js某一句程式碼：varids=;
查看原始檔時，發現js中下一頁的某一程式碼解析如下：varids=;
這個語法問題，肯定無法解析，所以才一直無法運作。
出現這種情況的原因是：var ids=;從action傳過來id容器是空串，所以解析後就成var ids=;
因為把id容器當作字符串，所以需要var ids=""即使傳過來的是空串，解析結果如下：var ids="";
總結：遇到整個頁面的js函數都無法執行，肯定說明js有問題，某個js函數中的語法問題，導致整個頁面無法解析運行。若是某個js函數未定義，則有可能是函數名稱與標籤定義的函數不相同。若是某個js函數中某個語句中某個字元未定義，則會明確提示未定義的字元。