[英]set jQuery cookie for each checkbox
I have a simple jQuery function that toggles classes based on checkbox states. 我有一个简单的jQuery函数,可根据复选框状态切换类。 Here's the code:
这是代码:
jQuery: jQuery的:
$('input[name$="bg-noise-option"]').click(function(){
var targetClass = $(this).data('at');
$('.' + targetClass).toggleClass('bg-noise');
});
HTML: HTML:
<div class="checkbox">
<label>
<input type="checkbox" name="bg-noise-option" data-at="page-wrap" checked>
Body <br>
</label>
<label>
<input type="checkbox" name="bg-noise-option" data-at="btn">
Elements <br>
</label>
<label>
<input type="checkbox" name="bg-noise-option" data-at="header, .navbar">
Top Header <br>
</label>
<label>
<input type="checkbox" name="bg-noise-option" data-at="page-header-wrap">
Page Header <br>
</label>
<label>
<input type="checkbox" name="bg-noise-option" data-at="site-footer">
Footer <br>
</label>
</div>
Question: How to create a cookie for each checkbox checked? 问题:如何为每个选中的复选框创建一个cookie? I'm simply trying to give these checkboxes some memory... not sure of the best way.
我只是想给这些复选框一些内存...不确定最好的方法。
I suspect some type of .each(function)
should do it, but I'm still quite the javascript novice. 我怀疑某种类型的
.each(function)
应该可以做到,但是我仍然是javascript新手。 I've tried the following: 我尝试了以下方法:
$.each(function(){
$.cookie('bg-noise-cookie', $(this).data('at'), {expires:365, path: '/'});
})
But of course that only creates one cookie for the most recently checked box. 但是,当然,这只会为最近选中的复选框创建一个cookie。 How to create a unique cookie for each?
如何为每个创建唯一的cookie? Or do I even need to?
还是我什至需要? Perhaps there's a way to store them in one cookie (an array?) and then simply reference the array on page load to check the checkboxes?
也许有一种方法可以将它们存储在一个cookie中(一个数组?),然后在页面加载时简单地引用该数组以检查复选框?
Much obliged for insight. 有很多见识的义务。
This assumes you're using the JQuery Cookie Plugin , since I see you referenced it in your question. 假设您正在使用JQuery Cookie插件 ,因为我看到您在问题中引用了它。
Here you are. 这个给你。 Creates and alters a single cookie file upon any checkbox click, storing only those data-at values that correspond to checked boxes.
单击任何复选框都会创建和更改单个cookie文件,仅存储与复选框对应的data-at值。
On page load, it retrieves that JSON string, coverts it back to an object, then loops through, applying a check to the box of any matching attribute. 在页面加载时,它会检索该JSON字符串,将其转换回一个对象,然后循环遍历,对任何匹配属性的框进行勾选。
Code tested and working. 经过测试的代码可以正常工作。
HTML: I added '[]' to your checkboxes to properly group them and removed any default checked boxes. HTML:我在您的复选框中添加了[[]],以对它们进行正确分组,并删除了所有默认复选框。
<div class="checkbox">
<label>
<input type="checkbox" name="bg-noise-option[]" data-at="page-wrap">
Body <br>
</label>
<label>
<input type="checkbox" name="bg-noise-option[]" data-at="btn">
Elements <br>
</label>
<label>
<input type="checkbox" name="bg-noise-option[]" data-at="header, .navbar">
Top Header <br>
</label>
<label>
<input type="checkbox" name="bg-noise-option[]" data-at="page-header-wrap">
Page Header <br>
</label>
<label>
<input type="checkbox" name="bg-noise-option[]" data-at="site-footer">
Footer <br>
</label>
</div>
JQuery: using $.cookie() plugin jQuery:使用$ .cookie()插件
<script type="text/javascript">
$(document).ready(function() {
// check for cookie on load
if( $.cookie('chk_ar') ) {
console.log($.cookie('chk_ar'));
var chk_ar = $.cookie('chk_ar');
// convert string to object
chk_ar = $.parseJSON(chk_ar);
console.log(chk_ar);
// loop through and apply checks to matching sets
$.each(chk_ar, function(index, value) {
console.log(value);
$('input').filter('[data-at="'+value+'"]').prop('checked', true);
});
}
});
// handle checkboxes
$('input[name="bg-noise-option[]"').on('click', function() {
var check_array = [];
// add to array
$(':checked').each(function() {
check_array.push($(this).attr('data-at'));
});
// stringify array object
check_array = JSON.stringify(check_array);
console.log(check_array);
// set cookie
$.cookie('chk_ar', check_array, {path:'/'});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.