クリックすると、Cookieを設定してチェックボックスをチェックします

Question

私はチェックボックス付きの画面を持っています。ラベルをクリックすると、テキストと同意ボタンを含む新しいウィンドウが開きます。ユーザが同意ボタンをクリックすると、チェックボックスを参照する一意のIDでクッキーが設定されます。クッキーが1に等しいかどうかに基づいてこのチェックボックスをチェックするにはどうすればよいですか？コードは以下のとおりです。

document.cookie = "doc_35_readit=0"; 
$('#have_read_agreement').on('click', function() {      
    document.cookie = "doc_35_readit=1"; 
}); 

ウィンドウが閉じているときに、チェックボックスをチェックする方法がわかりません。このような何か？

if (cookie("doc_35_readit") == "1") { 
    $(".doc_35_readit").click(); 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!-- Initial checkbox: --> 
    <input type="checkbox" 
    id="agreementChecker-0" 
    name="agreeCheck-0" 
    value="35" 
    class="mandatory agreeChecker doc_35_readit"/> 

<!-- New Window opens with text, button at bottom: --> 
    <p align="center" id="have_read_agreement" style="text-align:center;font-size:20px;"> 
    <a href="javascript:window.close()" class="btn-read">I have read this agreement and accept all terms and conditions.</a> 
    </p> 

Answer 1

あなたは、属性に入力のcheckedを設定することができます：trueまたはfalseのいずれかにチェックボックス要素を使用すると、それに応じてオンまたはオフしたい場合。クッキーを解析し、あなたはそれらの中から選択することができますでしょう

function getCookie(cname) { 
    var name = cname + "="; 
    var decodedCookie = decodeURIComponent(document.cookie); 
    var ca = decodedCookie.split(';'); 
    for(var i = 0; i <ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0) == ' ') { 
      c = c.substring(1); 
     } 
     if (c.indexOf(name) == 0) { 
      return c.substring(name.length, c.length); 
     } 
    } 
    return ""; 
} 

：

Answer 2

$('input[name=test]').attr('checked', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="test" />

はあなたのような独自の get関数を作成する必要がある名前でクッキーを取得するには

getCookie("doc_35_readit") 

あなたの状態は次のようになります：

if (getCookie("doc_35_readit") == "1") { 
    $(".doc_35_readit").click(); 
} 

Answer 3

これはネイティブのJavaScriptでのみ可能です。

いますが、クッキーを作成するために、専門家ではないようだと、あなたはjqueryの

を使用しているので、私はあなたがこのプラグインを使用することをお勧めします：https://github.com/js-cookie/js-cookie

、あなたはこの例を試すことができます。

<button id="delete">delete cookie</button> 
<button id="display">display cookie</button> 
<textarea></textarea> 

<div id="modal"><h1>this will display only if user not accept yet</h1>are you agree with our ToS? <input type="checkbox" id="agreementChecker-0" name="agreeCheck-0" value="35" class="mandatory agreeChecker doc_35_readit"></div> 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> 

<script> 
$(function(){ 


    $('#agreementChecker-0').change(function(){ 
     if($(this).prop('checked')){ 
      Cookies.set('doc_35_readit', 1); 
      $('#modal').hide(); 
     }else{ 
      Cookies.set('doc_35_readit', 0); 
      $('#modal').show(); 
     } 
    }); 

    if(Cookies.get('doc_35_readit')== 1){ 
     $('#modal').hide(); 
    } 

    $('#display').click(function(){ 
     var c = (Cookies.get('doc_35_readit') ==undefined) ? 'not found':Cookies.get('doc_35_readit'); 
     $('textarea').val(c); 
     console.log(Cookies.get()); //show all possible cookie in console 
    }); 

    $('#delete').click(function(){ 
     Cookies.remove('doc_35_readit'); 
     $('#modal').show(); 
    }); 
}); 
</script> 

PS：ページを更新して、Cookieが既に設定されているかどうかを確認できます。