[英]On click, set cookie and check checkbox
I have a screen with checkboxes. 我有一个带有复选框的屏幕。 When the label is clicked a new window will be opened with text and an agree button.
单击标签后,将打开一个新窗口,其中包含文本和一个同意按钮。 Once the user clicks the agree button, a cookie is set with a unique id referencing the checkbox.
用户单击“同意”按钮后,将设置一个具有唯一ID的Cookie,该ID会引用该复选框。 How do I check this checkbox based on if the cookie equals 1?
如何根据Cookie是否等于1来选中此复选框? Code is below.
代码如下。
document.cookie = "doc_35_readit=0";
$('#have_read_agreement').on('click', function () {
document.cookie = "doc_35_readit=1";
});
Now when the window is closed, I'm not sure how to check the checkbox. 现在,当窗口关闭时,我不确定如何选中该复选框。 Something like this maybe?
像这样的东西?
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>
You can set the attribute checked
of input:checkbox element to either true or false if you want it checked or unchecked accordingly. 您可以将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" />
To get the cookie by name you need to create your own get
function like : 要按名称获取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 "";
}
That will parse the cookies and gives you the ability to select from them by name like : 这将解析cookie,并使您能够按名称从它们中进行选择,例如:
getCookie("doc_35_readit")
Then your condition will work like : 然后,您的情况将如下所示:
if (getCookie("doc_35_readit") == "1") {
$(".doc_35_readit").click();
}
this is very possible to do with native javascript only. 仅使用本地javascript很有可能。
but because you seems not expert to create cookies and you are using jquery 但由于您似乎不擅长创建cookie,而您正在使用jquery
i recommend you to use this plugin: https://github.com/js-cookie/js-cookie 我建议您使用此插件: https : //github.com/js-cookie/js-cookie
then you can try this example: 那么您可以尝试以下示例:
<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: you can try to refresh your page to see your cookies is already set or not
PS:您可以尝试刷新页面以查看是否已设置Cookie。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.