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

Question

我有一个 table，我可以在其中选中一个复选框，它会记录该行中的所有内容。页面上有一些搜索功能和其他按钮，所以我想使用会话存储能够在整个刷新过程中保留所有选中的复选框，直到页面关闭。我从我发现的一个例子中得到了一些东西，但它似乎没有用。我该如何解决这个问题？

HTML 对于 table column/row 带有复选框：

<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, return true, 否则 false.

因此，当您选中该复选框时，它会设置为 true，根据上述逻辑，因为它不是 false - 测试是评估为 false.

解决方案：

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

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

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

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

不需要|| false。甚至 better/shorter:

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

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

关于你的问题"how can I make this work for individual checkboxes"：你可以使用复选框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，因此无法使用堆栈片段。

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

Have Checkbox Stay Checked Throughout Session

html

javascript

checkbox

jquery

session-storage