2017-02-20 6 views
3

情報をエレガントに表示するために使用するレスポンシブなCSSタブがありますが、ユーザーがページを更新すると最初にチェックされた入力に戻ります。以前に選択したユーザーのページをリフレッシュするときにユーザーボタンを選択したままにする方法を知りたいと思います。私はスクリプトを書いたが、うまくいかないようだ。php Javascript:ページ更新時にラジオボタンを選択したままにする

タブ

<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> 
+3

は、何らかの種類のストレージその他ページがJavaScriptを介して変更をリロードする際には賢明です。 – NewToJS

+0

@NewToJS:例を挙げて教えていただけますか? ':-D' –

答えて

7

はあなたの要件については、以下に動作します:あなたはページの更新や使用時に情報を渡す必要があります

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

正解です。将来のユーザーに役立つように、これをソリューションとして選択してください。参考までに、ローカルストレージに保存されているデータを表示するには、chrome - > F12 - >アプリケーション - >サイドナビゲーターのローカルストレージの選択をクリックします。キーと値は「選択済み」、「タブ2」はユーザーが入力した値を格納するのに役立ちます。 – Venky

関連する問題