点击后，设置Cookie并选中复选框

Question

我有一个带有复选框的屏幕。 单击标签后，将打开一个新窗口，其中包含文本和一个同意按钮。 用户单击“同意”按钮后，将设置一个具有唯一ID的Cookie，该ID会引用该复选框。 如何根据Cookie是否等于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

您可以将input：checkbox元素的checked属性设置为true或false（如果您希望将其相应地选中或取消选中）。

 $('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" /> 

Answer 2

要按名称获取cookie，您需要创建自己的get函数，例如：

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 "";
}

这将解析cookie，并使您能够按名称从它们中进行选择，例如：

getCookie("doc_35_readit")

然后，您的情况将如下所示：

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

Answer 3

仅使用本地javascript很有可能。

但由于您似乎不擅长创建cookie，而您正在使用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。