重新加载页面后保留复选框答案

【问题标题】：Preserving check box after reloading page重新加载页面后保留复选框
【发布时间】：2023-03-14 00:10:02
【问题描述】：

当复选框被选中或取消选中时，我试图在重新加载后保留复选框状态，以及用于检查和取消选中的 if 语句。我做错了什么或者最好的方法是什么？

$('.js-bbCheckbox').click(function(event) {

    $('.js-bbCheckbox').change(function(){
            if($(this).is(':checked')){
                window.location = '?filter=topRated'; 

            }else{
                window.location = '?filter=nottopRated';
            }
        });

【问题讨论】：

我不是网络编程专家，但我认为您需要在页面重新加载后使用 cookie 来保存数据。但我想知道别人怎么说。
试试看https://github.com/hck/jquery.cookie

标签： javascript jquery html

【解决方案1】：

因此，您可以设置位置，但需要页面根据过滤器更改复选框。这样，您就不需要保存 cookie。

 $(document).ready(function () {
        var topRated = new RegExp("[?|&]filter=topRated");
        $('.js-bbCheckbox').prop('checked', function () {
            var filter = window.location.search.match(topRated);
            return filter != null;
        }).change(function () {
            window.location = $(this).is(':checked') ? '?filter=topRated' : window.location.toString().replace(topRated, "");
        });
    });

【讨论】：

非常感谢，我可以在其他条件下摆脱 ?filter=topRated 而不是 ?filter=nottopRated 吗？基本上我不想在我的 URL 中使用 else 条件中的任何参数。
@ShoaibUd-Din 我将其编辑为不使用“?filter=nottopRated”
hmm 可能是我问错了，这就是我想做的：当我取消选中时 ?filter=topRated 应该从 url 中删除
@ShoaibUd-Din 此编辑应从 url 中删除 '?filter=topRated'
试过了，但没有删除。

【解决方案2】：

这不是完全错误的，因为它会起作用。但是一旦用户关闭页面并再次打开，复选框将具有默认状态。

如果您想在会话之间保留复选框的状态，您可以使用 cookie。您可以使用 document.cookie 属性使用 JavaScript 设置 cookie，但您最好查一下，因为它有点复杂。

但是，如果您在此应用程序上使用任何服务器端技术，则可以从那里设置 cookie。例如，在 PHP 中会这样：

$_COOKIE['checkbox-topRated'] = isset($_GET['topRated']);

然后，当您打印复选框时，您会检查该 cookie 是否为真。会是这样的：

$checked = '';
if ($_COOKIE['checkbox-topRated']) {
    $checked = ' checked="checked"';
}

echo '<type input="checkbox" name="topRated"'.$checked.'>';

【讨论】：