在重新加载时保存复选框状态 [英] saving checkbox state on reload

问题描述

如何通过会话保存复选框状态？我使用这个jQuery代码来切换选项：

  $（'div.check input：checkbox'）。bind 'change'，function（）{
 $（'＃'+ this.id +'txt'）。toggle（$（this）.is（'：checked'））; 
}）; 
  

但是当我重新加载时，复选框会回到它们的默认状态。我知道我必须使用会话，但我如何使复选框状态坚持使用会话在PHP？

html：

 < div class =check> ; 
< p>< input type =checkboxvalue =Nameid =namechecked /> < label for =name>名称< / label>< / p> 
< p>< input type =checkboxvalue =Referenceid =referencechecked /> < label for =reference> Reference< / label>< / p> 
< / div> 
 
< div id =nametxt>显示名称TEXT< / div> 
< div id =reftxt>显示参考文字< / div> 
  

解决方案

纯粹在JavaScript中支持 localStorage 如果可用，否则使用 document.cookie 。

  //这个函数会返回一个带有set和get方法的对象
 //使用localStorage（如果有的话）或默认document.cookie 
 if（window.localStorage）{
 //使用localStorage：
 return {
 set：function（id，data）{
 localStorage.setItem（key_prefix + id ，数据）; 
}，
 get：function（id）{
 return localStorage.getItem（key_prefix + id）; 
} 
}; 
} else {
 //使用document.cookie：
 return {
 set：function（id，data）{
 document.cookie = key_prefix + id +'= + encodeURIComponent方法（数据）; 
}，
 get：function（id，data）{
 var cookies = document.cookie，parsed = {}; 
 cookies.replace（/（[^ =] +）=（[^;] *）;? \s * / g，函数（整体，键值）{
 parsed [key] = decodeURIComponent（value）; 
}）; 
 return parsed [key_prefix + id]; 
} 
}; 
 
 
 
 jQuery（函数（$）{
 //关键字前缀用于cookie /存储
 var storedData = getStorage（ 'com_mysite_checkboxes_'）; 
 
 $（'div.check input：checkbox'）。bind（'change'，function（）{
 $（'＃'+ this.id +'txt '）.toggle（$（this）.is（'：checked'））; 
 //将数据保存在变化
 storedData.set（this.id，$（this）.is（' ：checked'）？'checked'：'not'）; 
}）。each（function（）{
 //在加载时，将值设置为我们从存储中读取的值：
 var val = storedData.get（this.id）; 
 if（val =='checked'）$（this）.attr（'checked'，'checked'）; 
 if（val == ''）$（this）.removeAttr（'checked'）; 
 if（val）$（this）.trigger（'change'）; 
}）; 
 
}）; 
  

jsFiddle演示可用 - 点击一些复选框，然后再次运行脚本！

how do i save checkbox state through sessions? i'm using this jquery code to toggle the options:

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

but when i reload, the checkboxes are back to their default state. i know i'd have to use sessions, but how do i make the checkbox state persist using sessions in 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>

解决方案

Purely in JavaScript supporting localStorage if available, otherwise using 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 -- Click some checkboxes, then "Run" the script again!

这篇关于在重新加载时保存复选框状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！