刷新页面后如何保持复选框选中

Question

我有一个下拉框，当从下拉列表中选择时，它会显示数据。 另外我在每个 td 上方都有一个复选框，用于隐藏由 java 脚本执行的列，如果用户选中该复选框并在下拉框中选择另一个值，则所选复选框将不会显示。

下面是选中复选框时隐藏列的代码

我想测试用户是否选中了复选框并且他在下拉框中选择了另一个值，那么所选的复选框将不会显示任何一个 我怎么能这样？

<input type='checkbox' style='margin:-19px 0 0 732px;   border: 1px solid grey;' name='9xx'/>9xx
<input type='checkbox' style='margin:-19px 0 0 36px;   border: 1px solid grey;' name='6xx'/>6xx  
<input type='checkbox' style='margin:-19px 0 0 30px;   border: 1px solid grey;' name='12xx'/>12xx
<input type='checkbox' style='margin:-19px 0 0 21px;   border: 1px solid grey;' name='14xx'/>14xx
<input type='checkbox' style='margin:-19px 0 0 26px;   border: 1px solid grey;' name='10xx'/>10xx
<input type='checkbox' style='margin:-19px 0 0 31px;  border: 1px solid grey;' name='8xx'/>8xx
<input type='checkbox' style='margin:-19px 0 0 31px;  border: 1px solid grey;' name='11xx'/>11xx

<script>
$("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).show();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});

</script>

Answer 1

使用 localStorage。

这是它的 JSFiddle 示例。 Link

背后的代码：

HTML 代码：

<input type="checkbox">

JS代码：

$(function(){
    var test = localStorage.input === 'true'? true: false;
    $('input').prop('checked', test || false);
});

$('input').on('change', function() {
    localStorage.input = $(this).is(':checked');
    console.log($(this).is(':checked'));
});