重新加载时保存复选框状态

Posted

技术标签:

【中文标题】重新加载时保存复选框状态【英文标题】:saving checkbox state on reload 【发布时间】:2011-03-19 19:42:22 【问题描述】:

如何通过会话保存复选框状态?我正在使用这个 jquery 代码来切换选项:

$('div.check input:checkbox').bind('change',function()
    $('#'+this.id+'txt').toggle($(this).is(':checked'));
);

但是当我重新加载时,复选框恢复到默认状态。我知道我必须使用会话,但是如何使用 php 中的会话使复选框状态持续存在?

html:

<div class="check">
<p><input type="checkbox" value="Name" id="name" checked /> <label for="name">Name</label></p>  
<p><input type="checkbox" value="Reference " id="reference" checked /> <label for="reference">Reference</label></p>
    </div>

    <div id="nametxt"> Show Name TEXT </div>
    <div id="reftxt"> Show Ref TEXT </div>

【问题讨论】:

对于支持它或使用document.cookie的浏览器,将复选框的状态存储在localStorage中可能更容易 “但是当我重新加载...” - 在将表单提交回服务器之前,您是否尝试在页面刷新时保持状态?! @w3d,没有表格。只有两个显示数据的复选框。如果未选中该复选框,则它应该隐藏相应的数据并且该状态应该保持,直到用户再次选中它或用户关闭浏览器或注销。 仅供参考,您不需要在问题标题中包含 [keywords]。这就是标签的用途。 @fusion 如果没有实际的表单(正在提交),那么这纯粹是一个 javascript (JQuery) 和 Cookie 问题,而不是 PHP 或 (PHP) 会话。您将需要使用 Cookie 来维护状态。 【参考方案1】:

纯 JavaScript 支持 localStorage(如果可用),否则使用 document.cookie

function getStorage(key_prefix) 
    // this function will return us an object with a "set" and "get" method
    // using either localStorage if available, or defaulting to document.cookie
    if (window.localStorage) 
      // use localStorage:
      return 
        set: function(id, data) 
          localStorage.setItem(key_prefix+id, data);
        ,
        get: function(id) 
          return localStorage.getItem(key_prefix+id);
        
      ;
     else 
      // use document.cookie:
      return 
         set: function(id, data) 
           document.cookie = key_prefix+id+'='+encodeURIComponent(data);
         ,
         get: function(id, data) 
           var cookies = document.cookie, parsed = ;
           cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) 
              parsed[key] = decodeURIComponent(value);
           );
           return parsed[key_prefix+id];
         
       ;
     
  

jQuery(function($) 
  // a key prefix is used for the cookie/storage
  var storedData = getStorage('com_mysite_checkboxes_'); 

  $('div.check input:checkbox').bind('change',function()
    $('#'+this.id+'txt').toggle($(this).is(':checked'));
    // save the data on change
    storedData.set(this.id, $(this).is(':checked')?'checked':'not');
  ).each(function() 
    // on load, set the value to what we read from storage:
    var val = storedData.get(this.id);
    if (val == 'checked') $(this).attr('checked', 'checked');
    if (val == 'not') $(this).removeAttr('checked');
    if (val) $(this).trigger('change');
  );

);

jsFiddle demo available -- 点击一些复选框,然后再次“运行”脚本!

【讨论】:

谢谢!演示效果很好,在我的项目中,复选框状态仍然存在,但即使未选中复选框,相应的数据仍会显示在页面加载中。 @fusion - 可能完全在不同的代码部分中,您能否发布指向实际页面的链接,我可以尝试为您触发它。 @gnarf,谢谢,但该项目尚未上线。我也尝试过触发它,它不会引发任何错误。上面代码中我更改的唯一行是 $('#ab_'+this.id).toggle($(this).is(':checked')); 。可能是因为这个 id 变化? 在该行/trigger('change'); 行上放一个断点,看看它是否正在运行 做到了,它执行了那一行。有趣的是,当我放置断点并执行它时,它可以正常工作。 .但是没有断点,它不会 - 即,如果未选中复选框,它会显示文本。【参考方案2】:

有一种方法,但是您需要进行一些更改-当然,如果您通过具有相同参数名称(此处为 name_txt 和 ref_txt)的表单或 JQuery 提交,它将起作用。

给复选框输入一个名称

<?php
if(isset($_REQUEST['name_txt']))
    $name_text = $_REQUEST['name_txt'];
if(isset($_REQUEST['ref_txt']))
    $ref_text = $_REQUEST['ref_txt'];
    ?>
    <p><input type="checkbox" name = "name_txt" value="Name" id="name" <?php echo ($name_text == 'Name' || !isset($name_text))?'checked':'';?> /> 
    <label for="name">Name</label></p>  
    <p><input type="checkbox" name = "ref_txt" value="Reference " id="reference" <?php echo ($ref_text == 'Reference' || !isset($ref_text))?'checked':'';?> /> <label for="reference">Reference</label></p>

【讨论】:

不知何故不起作用。我还希望检查默认值,以便显示文本。但是使用此代码,即使页面加载时未选中代码[默认],它也会显示代码。 你能显示你的php脚本吗?您是通过表单还是 JQuery 提交输入?如何?请说清楚。【参考方案3】:

如果您不需要将其保存在数据库中,我建议您使用 cookie 而不是会话。您可以使用简单的 jQuery cookies plugin

【讨论】:

我将如何将复选框状态存储在 cookie 中。任何帮助将不胜感激。

以上是关于重新加载时保存复选框状态的主要内容,如果未能解决你的问题,请参考以下文章

用户退出应用程序时如何保存 Android CheckBox 的状态?

将QCheckBox的状态保存在文件中,程序重启时加载状态

按类名保存/加载复选框状态

使用php将复选框状态写入/读取文件

Android:需要在自定义适配器列表视图中保存复选框状态

ReactJS:即使在重新渲染组件后复​​选框状态仍然存在