【问题标题】:How to retain radio input state on page refresh如何在页面刷新时保留无线电输入状态
【发布时间】:2013-09-28 09:19:55
【问题描述】:

如果用户提交有错误的表单(以防页面刷新),我需要在该表单上存储所有单选按钮的状态。

我想实现与此非常相似的东西:

$(function(){
        $('.example input[type="radio"]:checked').each(function(){
        $(this).attr("checked",true);
    });

任何帮助将不胜感激!

【问题讨论】:

  • 您需要使用 cookie 或 HTML 5 本地存储,或者让服务器根据 POST 数据生成新的 HTML。很多选择,很常见的问题。您的服务器端技术是什么?
  • 使用任何类型的持久数据客户端作为 cookie 或 localStorage
  • 看这里,我觉得这个老帖子可以帮到你stackoverflow.com/questions/16206322/…
  • 在提交之前您可以执行验证

标签: javascript jquery


【解决方案1】:

您可以将其状态存储在本地存储中,并在每次页面加载后恢复它。

存储值的小例子:

$('#myCheckbox').click(function () {
    localStorage['my.checkbox'] = this.checked;
});

恢复它:

$('#myCheckbox').prop('checked', localStorage['my.checkbox'] == 'true');

【讨论】:

  • 您能帮忙编码一下吗?我已将 myformID 添加到 onclick,但似乎不起作用..
  • 是的,该表单上有大约 20 个单选按钮 :)
  • 您需要将点击事件绑定到单选元素,这样您就可以在每次点击时保存它的选中状态。您将需要编写另一个小脚本来在加载时恢复这些值。
  • 您能否告知我在此代码中做错了什么,因为它不起作用: if(Modernizr.localstorage){ $('input[type="radio"]).click(function( ){ localStorage["key"] = this.checked; }); $('input[type="radio"]').prop('checked' localStorage["key"]=='true'); }
  • 我可以告诉你,prop() 的参数之间漏掉了一个 ,
【解决方案2】:

也许您将信息存储在会话令牌或会话 cookie 中。如果您使用 html5 组件,您可以尝试使用 html 本地存储。

【讨论】:

    【解决方案3】:

    你只需要更新代码

    $(function(){
            $('.example input[type="radio"]').each(function(){
               $(this).attr("checked",$(this).checked());
        });
    

    当用户选择单选按钮时,它将保存单选按钮的属性。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-12-20
      • 2018-07-25
      • 2015-06-01
      • 2012-09-25
      • 2016-09-08
      • 1970-01-01
      相关资源
      最近更新 更多