Question

我希望在刷新页面时保持选中复选框以保持检查状态。

实际上我的页面不仅仅是刷新，我的意思是我有分页，如果我点击下一个按钮，网址将会改变为index.php?page=2

下面的代码可以在刷新页面后保持复选框，但是当我点击下一页并且网址变为如上所述时会失败。

那么如何检查盒子？我已经尝试将$_GET['page']放在复选框上，但它不起作用。

<form id="form" method="post" action="">
            <input type="checkbox" name="s" class="checkbox" <?=(isset($_POST['s'], $_GET['page'])?' checked':'')?>/> Small<br>
</form>

<script type="text/javascript">  
    $(function(){
     $('.checkbox').on('change',function(){
        $('#form').submit();
        });
    });
</script>

以下是创建页面ID的php部分。我在上面的表单下面有php代码：

if(isset($_GET['page']))
        {
            $page = $_GET['page'];
        }
        else
        {
            $page = 1;
        }


        /*
         * Set a few of the basic options for the class, replacing the URL with your own of course
         */
        $options = array(
            'results_per_page'              => 2,
            'url'                           => 'index.php?page=*VAR*',
            'db_handle'                     => $dbh
        );

Answer 1

对于现代浏览器，您可以使用localStorage，如此

$(function(){
    var value = localStorage.input === 'true' ? true: false; // 1
    $('input').prop('checked', value || false);
});

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

演示：http://jsfiddle.net/CC2hC/1

当输入被更改时，您将值存储在localStorage中，当页面再次加载时，检查它是否存在并将值或默认值应用于false

对于旧版浏览器，您可能需要使用Cookie或数据库。

您必须使用注释// 1检查该行的值，因为prop接受一个布尔值，而localStorage值将是string

HTML：页面刷新后检查复选框

1 个答案: