클릭하면 쿠키를 설정하고 확인란을 선택하십시오.

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 또는 당신이 선택 또는 선택 취소 따라하려는 경우 거짓이다. 쿠키를 구문 분석하고 당신이 그들로부터 선택 할 수있는 기능을 제공합니다

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

이것은 네이티브 자바 스크립트에서만 가능합니다.

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

: https://github.com/js-cookie/js-cookie

다음이 예제를 시도 할 수 있습니다 : 당신이 쿠키를 만드는 전문가가 보인다 당신이 JQuery와

을 사용하고 있기 때문에

하지만 난 당신이 플러그인을 사용하는 것이 좋습니다

추신 : 페이지가 새로 고침되어 쿠키가 이미 설정되어 있는지 확인할 수 있습니다.