Question

我正在使用Java，Thymeleaf，Spring，HTML和一些CSS在Eclipse中的购物清单Web应用程序上工作。我使用HTML将一个复选框列表编码到应用程序中，所以当我完成某个列表时，我可以单击该复选框，然后在文本中添加一行。但是，当我刷新页面时，复选框不会保持选中状态。我希望能够通过页面刷新来检查框。我已经尝试过其他Stack Overflow问题的各种不同代码，例如将Javascript编码到HTML页面中，但到目前为止似乎没有任何工作。这是我的HTML代码：

＆＃13;

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	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 {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 15px;
}

.strikethrough:checked+.strikeThis {
	text-decoration: line-through
} 


</style>

</head>
<body layout:fragment="content">
	<div class="row">
		<h1>Shopping Lists</h1>
		<!-- a simple button for later to add shopping lists -->
		<a href="/" th:href="@{|/ListsofLists/add|}"><input type="button"
			value="Add list" /></a>
		<table>
			<thead>
				<tr>
					<th>Name</th>
					<th>&nbsp;</th>
					<th>&nbsp;</th>
				</tr>
			</thead>
			<tbody class="list">
				<tr th:each="list : ${lists}">

					<td><input type="checkbox" name="check" class="strikethrough"
						value="1" /> <label for="check" class="strikeThis"
						th:text="${list.name}"> Name </label></td>
					<!-- 	<td th:text="${list.name}"></td> -->
					<td><a href="/" th:href="@{|/ListsofLists/${list.id}|}">Show</a></td>
					<td><form method="POST">
							<input type="hidden" name="listId" th:value="${list.id}" />
							<button type="submit">Delete</button>
						</form></td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

＆＃13;

我会尝试回答尽可能多的问题，以便找出这个问题。抱歉，如果它相当简单，我是编码和学习的新手。

Answer 1

您需要将复选框状态保存到本地存储。因此，浏览器可以在加载/刷新时检查复选框的布尔值true或false。

以下是在本地存储上存储复选框状态的教程： https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/

Answer 2

有很多方法可以做到这一点。

一种比较流行的方法是使用JavaScript cookies。在此方法中，您可以设置像checkbox=true这样的cookie，并在页面刷新时获取该值。

另一种方法是在JavaScript中设置location hash参数，同样在页面加载时读取此参数。

最后，您还可以使用HTML5 LocalStorage。

这些是执行此操作的所有客户端方法。您始终可以使用以PHP或您选择的语言编写的HTML解析脚本在服务器端执行此操作。

正如我最近提到的另一个SO问题，运行页面刷新会清除以前在JavaScript和HTML表单中设置的所有值。一切都好。 对于未来读过这篇文章的人，请不要在JavaScript代码中使用页面刷新。它让很多人非常生气，导致他们无法控制地拔出头发。

如何通过页面刷新来保留复选框选择？

2 个答案: