トグルボタンの状態が混乱します。

Question

フォームの1つをjQueryトグルに更新する処理中です。フォームは巨大で、すべてのフィールドは必要ではありませんが、ユーザーがすべてのフィールドを埋めることを望むなら、それはさらに優れています。トグルを行うことに関する一般的な考え方は、すべてのフィールドを不要にすることで、トグルを行うことです。

インターネット上のいくつかの例を確認しながら、これらのフォームが状態を覚えていないことに気付いたのは、ユーザーが一度にウィンドウを閉じて後でそれを埋めることにした場合です。ブラウザのクッキーは私は "フォームの状態を覚えておく"ことが必要でした。

<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"> 
    <label class="onoffswitch-label" for="myonoffswitch"></label> 
</div> 
<p> hi </p> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.js"></script> 
<script> 

$(function() { 

    if (Cookies) { 
    $("p").toggle(!(!!Cookies("toggle-state")) || Cookies("toggle-state") === 'true'); 
    } 

    $('.onoffswitch-checkbox').click(function() { 
    console.log($(this).is(":checked")); 
     $("p").toggle(); 
     Cookies.set("toggle-state", $("p").is(':visible'), { 
     expires: 1, 
     path: '/' 
     }); 
    }); 
}); 

これは問題ありません。Fiddleをチェックしてください。

私が後で気づいたのは、クッキーが最後に閉じたトグル状態を記憶しますが、トグルボタン状態は記憶していません。

テキストを表示する必要がある場合は、左にスライドするトグルボタンを切り替え、緑色から灰色に変えてテキストを表示します。私はフォームウィンドウを閉じて、テキストが表示されている同じフォームをリロードします（覚えておいてください、私たちはクッキーを持っています。

これを修正するにはどうすればよいですか？

Answer 1

あなたがやっているとき、あなたはjQueryを使ってchecked属性を設定する場合は、checked属性は、あなたのHTML内にハードコーディングされているので、あなたのスイッチは常に上で開始する（あるいは、少なくとも、あなたのフィドルで行う）

クッキーチェック、それは動作します。

if (Cookies) { 
    $("p").toggle(!(!!Cookies("toggle-state")) || Cookies("toggle-state") === 'true'); 

    // ADD THIS 
    if(Cookies("toggle-state") === 'true') { 
     $('#myonoffswitch').prop("checked", true); 
    } 
}