以下是一个示例的解决方法,使用JavaScript和HTML来实现在表格中保持选定选项处于选定状态:
HTML代码:
Option 1
Option 2
Option 3
JavaScript代码:
// 获取保存在本地存储中的选项状态
function getSelectedOptions() {
var options = JSON.parse(localStorage.getItem("selectedOptions"));
if (options) {
return options;
} else {
return [];
}
}
// 将选项状态保存到本地存储
function saveSelectedOptions(selectedOptions) {
localStorage.setItem("selectedOptions", JSON.stringify(selectedOptions));
}
// 设置选项的选中状态
function setSelectedOptions() {
var options = getSelectedOptions();
var checkboxes = document.querySelectorAll("#myTable input[type=checkbox]");
checkboxes.forEach(function(checkbox) {
if (options.includes(checkbox.value)) {
checkbox.checked = true;
} else {
checkbox.checked = false;
}
});
}
// 监听复选框的改变事件
var checkboxes = document.querySelectorAll("#myTable input[type=checkbox]");
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener("change", function() {
var selectedOptions = getSelectedOptions();
if (checkbox.checked) {
selectedOptions.push(checkbox.value);
} else {
var index = selectedOptions.indexOf(checkbox.value);
if (index > -1) {
selectedOptions.splice(index, 1);
}
}
saveSelectedOptions(selectedOptions);
});
});
// 初始化选项的选中状态
setSelectedOptions();
上述代码中,首先定义了getSelectedOptions()
函数来获取保存在本地存储中的选项状态。如果选项状态存在,则返回选项数组,否则返回一个空数组。
然后定义了saveSelectedOptions(selectedOptions)
函数来将选项状态保存到本地存储。使用JSON.stringify()
方法将选项数组转换为字符串,并使用localStorage.setItem()
方法将其保存。
接下来,定义了setSelectedOptions()
函数来设置选项的选中状态。首先获取保存的选项数组,并遍历所有复选框元素。如果选项数组中包含复选框的值,则将其设置为选中状态,否则设置为未选中状态。
然后,通过querySelectorAll()
方法获取所有复选框元素,并使用addEventListener()
方法为每个复选框添加一个change
事件监听器。在事件处理程序中,获取当前选中的选项数组,并根据复选框的选中状态更新选项数组。最后,调用saveSelectedOptions()
函数将更新后的选项数组保存到本地存储。
最后,在代码的末尾调用setSelectedOptions()
函数来初始化选项的选中状态。