javascript - PHP Javascript : Keeping radio buttons selected on page refresh

标签 javascript php jquery html css

我有响应式 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>

最佳答案

以下是否符合您的要求:

<!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>

关于javascript - PHP Javascript : Keeping radio buttons selected on page refresh,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42335747/

相关文章:

jquery - 为什么jQuery的点击功能不起作用?

javascript - 如何在 TypeScript 中安全地解构 JavaScript 对象

javascript - 绑定(bind)与延迟相结合

javascript - 使用 jquery 刷新 php 并重新加载图像

javascript - JS onClick 返回 false 和 jQuery 全局 .click

php - 当 PHP 响应 header 包含 "application/json"时,JSON.parse 在 jQuery 中失败

javascript - 从文本中剥离标记(以数组形式提供)未通过 Codewars 中的测试

javascript - 如何检测 HTML5 中任何元素的大小调整

php - 将 call_user_func() 与对象一起使用

php - 实时 HTML/AJAX/PHP 聊天的最佳方式