在整个会话中保持复选框处于选中状态 [英] Have Checkbox Stay Checked Throughout Session

问题描述

我有一个表，可以在其中选中一个复选框，它将记录该行中的所有内容.页面上有一些搜索功能和其他按钮，因此我希望使用会话存储来保持所有复选框的选中，选中以及整个刷新过程，直到关闭页面为止.我从一个发现的示例中得到了一些东西，但是它似乎没有用.我该如何解决?

带有复选框的表列/行的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'));
});
});

解决方案

看看这个:

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');
    });
});

有效的解决方案-由于不支持sessionStorage，因此无法使用堆栈代码段出于安全限制.

I have a table where I can check a checkbox and it will log all of the contents in the row. There are some search functions and other buttons on the page, so I want to use session storage to be able to keep any checkboxes that are checked, checked, throughout refreshes until the page is closed. I have something from an example I found but it doesnt seem to be working. How could I fix this?

HTML for table column/row with checkboxes:

<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'));
});
});

解决方案

Take a look at this:

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

So what does it mean? If sessionStorage.input is false, return true, else false.

So when you check the checkbox then it's set to true, which by the above logic, since it's not false - test is evaluated as false.

Solution:

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

This will set test to true if the session is also true.

You can also change $('input').prop('checked', test || false); to:

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

The || false is unnecessary. Or even better/shorter:

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

And then you don't need the test variable at all.

As for your question "how can I make this work for individual checkboxes": You can use the checkbox id for example:

// 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');

And then, when you refresh the page:

$(':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');
});

So this is how it should look like:

$(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 - Couldn't use stack-snippets because it doesn't support sessionStorage due to security limitations.

这篇关于在整个会话中保持复选框处于选中状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！