admin管理员组

文章数量:1334704

I have responsive css tabs I use to display information in an elegant manner but when user refresh page it goes back to first checked input. I would like to know how to keep the user button selected on page refresh the one who he previously selected. I wrote a script but it does not seem to work.

tabs

  <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

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

I have responsive css tabs I use to display information in an elegant manner but when user refresh page it goes back to first checked input. I would like to know how to keep the user button selected on page refresh the one who he previously selected. I wrote a script but it does not seem to work.

tabs

  <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

<script>
$(document).ready(function(){
    $('.inputabs input[type="radio"]').each(function(){
        $(this).attr("checked",$(this).checked());
    }
);
</script>
  • javascript
  • php
  • jquery
  • html
  • css
Share Improve this question edited Feb 20, 2017 at 3:57 Calos 1,95223 silver badges31 bronze badges asked Feb 20, 2017 at 2:55 Sebastian FarhamSebastian Farham 8252 gold badges13 silver badges27 bronze badges 2
  • 3 You will have to pass information upon the page refresh or use some sort of storage otherwise when the page reloads any changes via javascript will be lost. – NewToJS Commented Feb 20, 2017 at 2:57
  • @NewToJS: do you mind teaching by example? :-D – Sebastian Farham Commented Feb 20, 2017 at 3:05
Add a ment  | 

1 Answer 1

Reset to default 10

Will the following work for you requirement:

<!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis./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>

本文标签： Php JavascriptKeeping radio buttons selected on page refreshStack Overflow

版权声明：本文标题：Php Javascript : Keeping radio buttons selected on page refresh - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742358724a2459935.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。