Php Javascript：在页面刷新时保持选中单选按钮答案

【问题标题】：Php Javascript : Keeping radio buttons selected on page refreshPhp Javascript：在页面刷新时保持选中单选按钮
【发布时间】：2017-07-09 05:05:18
【问题描述】：

我有响应式 css 选项卡，用于以优雅的方式显示信息，但是当用户刷新页面时，它会返回到第一个检查输入。我想知道如何保持页面上选中的用户按钮刷新他之前选择的那个。我写了一个脚本，但它似乎不起作用。

标签

  <input class="inputabs" id="tab1" type="radio" name="tabs" checked="checked">
  <label class="labeltabs" for="tab1">Inbox</label>

  <input class="inputabs" id="tab2" type="radio" name="tabs" >
  <label class="labeltabs"for="tab2">Important</label>

  <input class="inputabs" id="tab3" type="radio" name="tabs">
  <label class="labeltabs" for="tab3">Bin</label>

脚本

<script>
$(document).ready(function(){
    $('.inputabs input[type="radio"]').each(function(){
        $(this).attr("checked",$(this).checked());
    }
);
</script>

【问题讨论】：

您必须在页面刷新时传递信息或使用某种存储，否则当页面重新加载时，通过 javascript 进行的任何更改都将丢失。
@NewToJS：你介意以身作则吗？ :-D

标签： javascript php jquery html css

【解决方案1】：

以下是否适合您的要求：

<!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      if(localStorage.selected) {
        $('#' + localStorage.selected ).attr('checked', true);
      }
      $('.inputabs').click(function(){
        localStorage.setItem("selected", this.id);
      });
    });

</script>
 </head>
 <body>
  <input class="inputabs" id="tab1" type="radio" name="tabs" checked="checked">
  <label class="labeltabs" for="tab1">Inbox</label>

  <input class="inputabs" id="tab2" type="radio" name="tabs" >
  <label class="labeltabs"for="tab2">Important</label>

  <input class="inputabs" id="tab3" type="radio" name="tabs">
  <label class="labeltabs" for="tab3">Bin</label>
 </body>
 </html>

【讨论】：

正确答案。请选择此作为解决方案，以便对未来的用户有所帮助。仅供参考，要查看存储在本地存储中的数据，在 chrome 中 -> 按 F12 ->单击应用程序 -> 在侧面导航中选择本地存储。您会发现键和值是“selected”和“tab2”，这有助于存储用户输入的值。