在整个会话期间保持选中复选框

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，这会将 test 设置为 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 - 由于安全限制，它不支持 sessionStorage，因此无法使用 stack-sn-ps。