2016-12-02 112 views
0

我正在使用Java,Thymeleaf,Spring,HTML和一些CSS在Eclipse中使用購物清單Web應用程序。我使用HTML將複選框列表編碼到應用程序中,因此當我完成特定列表時,我可以單擊複選框並在文本中放置一行。但是,當我刷新頁面時,複選框不會保持檢查狀態。我希望能夠通過刷新頁面來保持該框。我已經嘗試了其他堆棧溢出問題的各種不同代碼,比如將JavaScript編碼到HTML頁面中,但似乎沒有任何工作到目前爲止。這裏是我的HTML代碼:如何在頁面刷新時保留複選框選擇?

<!DOCTYPE HTML> 
 
<html xmlns:th="http://www.thymeleaf.org" 
 
\t xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
 
\t layout:decorator="layouts/basic"> 
 
<link rel="stylesheet" th:href="@{/templates.css/main.css}" /> 
 
<head> 
 
<title>Getting Started: Serving Web Content</title> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<style> 
 
table, th, td { 
 
\t border: 1px solid black; 
 
\t border-collapse: collapse; 
 
\t padding: 15px; 
 
} 
 

 
.strikethrough:checked+.strikeThis { 
 
\t text-decoration: line-through 
 
} 
 

 

 
</style> 
 

 
</head> 
 
<body layout:fragment="content"> 
 
\t <div class="row"> 
 
\t \t <h1>Shopping Lists</h1> 
 
\t \t <!-- a simple button for later to add shopping lists --> 
 
\t \t <a href="/" th:href="@{|/ListsofLists/add|}"><input type="button" 
 
\t \t \t value="Add list" /></a> 
 
\t \t <table> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t <th>&nbsp;</th> 
 
\t \t \t \t \t <th>&nbsp;</th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody class="list"> 
 
\t \t \t \t <tr th:each="list : ${lists}"> 
 

 
\t \t \t \t \t <td><input type="checkbox" name="check" class="strikethrough" 
 
\t \t \t \t \t \t value="1" /> <label for="check" class="strikeThis" 
 
\t \t \t \t \t \t th:text="${list.name}"> Name </label></td> 
 
\t \t \t \t \t <!-- \t <td th:text="${list.name}"></td> --> 
 
\t \t \t \t \t <td><a href="/" th:href="@{|/ListsofLists/${list.id}|}">Show</a></td> 
 
\t \t \t \t \t <td><form method="POST"> 
 
\t \t \t \t \t \t \t <input type="hidden" name="listId" th:value="${list.id}" /> 
 
\t \t \t \t \t \t \t <button type="submit">Delete</button> 
 
\t \t \t \t \t \t </form></td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t </div> 
 
</body> 
 
</html>

我會盡量回答儘可能多的問題,儘可能以弄清楚這個問題。如果這件事相當簡單,我很抱歉,我對編碼和仍然學習很陌生。

+1

有很多方法可以做到,一個簡單的方法可以是cookies –

+0

您可以在控制器類中使用session屬性 –

回答

0

你需要找出一種方法來存儲,該複選框已被選中。通常解決方案涉及localstorage/cookies,會話或通過數據庫。

當框被選中時,將其存儲在某個地方。同樣,如果未選中,您也需要存儲該首選項。然後,每次加載頁面時,都需要檢查是否存在已保存的偏好設置,或者只需轉到默認設置即可。

每個存儲選項都有好處。 Local storage & cookies很容易實現。但是它們位於客戶端的機器上,因此它們是不穩定的。如果這是重要的信息,不要單純依靠這種方法。會話存儲(phpHTML5)將持續瀏覽器會話的持續時間。如果您不需要數據作爲永久選擇持續存在,這很有幫助。如果你需要它是永久的,你需要把東西保存到數據庫中。

0

有很多方法可以做到這一點。

一個比較流行的方法是使用JavaScript cookies。在這種方法中,您可以設置一個餅乾,如checkbox=true,並在頁面刷新時獲取該值。

另一種方法是在JavaScript中設置location hash參數,同樣在頁面加載時讀取此參數。

最後,您還可以使用HTML5 LocalStorage

這些都是用於執行此操作的客戶端方法。您始終可以在服務器端使用以PHP編寫的HTML解析腳本或您選擇的語言來執行此操作。

正如我最近在另一個SO問題中提到的,運行頁面刷新清除了以前在JavaScript和HTML表單中設置的所有值。一切順利。 對於閱讀此內容的未來用戶,請不要在JavaScript代碼中使用頁面刷新。它使許多人非常生氣,並導致他們無法控制地拔掉頭髮。

0

您可以使用本地存儲來存儲用戶的複選框選擇,並且在頁面刷新時您可以從本地存儲中檢索複選框選擇並設置複選框選擇。

使用本地存儲的簡單的例子是:

// Store 
localStorage.setItem("lastname", "Smith"); 
// Retrieve 
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 

可以查看有關本地存儲的更多詳細信息,W3Schools的位置(http://www.w3schools.com/html/html5_webstorage.asp

有關你的情況下,你可以jQuery和本地存儲使用該使用指導(https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/)在單擊複選框時記住用戶的選擇,並在頁面刷新時檢索它們。

相關問題