Question

我有一个表格，我可以勾选一个复选框，它会记录行中的所有内容。页面上有一些搜索功能和其他按钮，因此我希望使用会话存储能够保留在刷新期间检查，检查和检查的任何复选框，直到页面关闭为止。我从我发现的一个例子中得到了一些东西，但它似乎并没有起作用。我怎么能解决这个问题？

表格列/行的HTML，带复选框：

<td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid"></td>

JavaScript的：

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

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

Answer 1

看看这个：

var test = sessionStorage.input === 'false'? true: false;

那是什么意思？如果sessionStorage.input false ，请返回 true ，否则 false 。

因此，当您勾选复选框时，它会设置为 true ，按照上述逻辑，因为它不是 false - 测试评估为false。

解决方案：

var test = sessionStorage.input === 'true';

如果会话也是 true ，这会将测试设置为true。

您也可以将$('input').prop('checked', test || false);更改为：

$('input').prop('checked', test);

|| false是不必要的。甚至更好/更短：

$('input').prop('checked', sessionStorage.input === 'true');

然后你根本不需要test变量。

至于您的问题“我如何才能为单个复选框执行此操作”：您可以使用复选框id作为示例：

// save the individual checkbox in the session inside the `change` event, 
// using the checkbox "id" attribute
var $el = $(this);
sessionStorage[$el.prop('id')] = $el.is(':checked');

然后，当您刷新页面时：

$(':checkbox').each(function() {
    // Iterate over the checkboxes and set their "check" values based on the session data
    var $el = $(this);
    $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
});

所以它应该是这样的：

$(function(){
    $('input:checkbox').each(function() {
        // Iterate over the checkboxes and set their "check" values based on the session data
        var $el = $(this);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('input:checkbox').on('change', function() {
        // save the individual checkbox in the session inside the `change` event, 
        // using the checkbox "id" attribute
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});

Working solution - 无法使用stack-snippets，因为由于安全限制，它不支持sessionStorage。

让Checkbox在整个会话期间保持检查状态

1 个答案: