为每个复选框设置jQuery cookie [英] set jQuery cookie for each checkbox

问题描述

我有一个简单的jQuery函数，基于复选框状态切换类。以下是代码：

I have a simple jQuery function that toggles classes based on checkbox states. Here's the code:

jQuery：

  $('input[name$="bg-noise-option"]').click(function(){
    var targetClass = $(this).data('at');
    $('.' + targetClass).toggleClass('bg-noise');
  });

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>

问题：
如何为每个复选框创建一个cookie检查？我只是想给这些复选框一些记忆...不确定最好的方法。

Question: How to create a cookie for each checkbox checked? I'm simply trying to give these checkboxes some memory... not sure of the best way.

我怀疑某些类型的 .each（function）应该这样做，新手。我试过下面的：

I suspect some type of .each(function) should do it, but I'm still quite the javascript novice. I've tried the following:

$.each(function(){
  $.cookie('bg-noise-cookie', $(this).data('at'), {expires:365, path: '/'});
})

但是，当然，只会为最近选中的框创建一个cookie。如何为每个创建唯一的cookie？或者我甚至需要？也许有一种方法可以将它们存储在一个cookie（数组？），然后只是引用数组的页面加载检查复选框？

But of course that only creates one cookie for the most recently checked box. How to create a unique cookie for each? 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?

很有必要的洞察力。

推荐答案

这假设您使用 JQuery Cookie插件，因为我看到你引用它在你的问题。

This assumes you're using the JQuery Cookie Plugin, since I see you referenced it in your question.

这里。

在网页加载时，它会检索该JSON字符串，覆盖它回一个对象，然后循环，应用检查到任何匹配属性的框。

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.

代码测试和工作。

HTML：我在您的复选框中添加了'[]'，以便正确地对其进行分组，并删除任何默认复选框。

HTML: I added '[]' to your checkboxes to properly group them and removed any default checked boxes.

<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: using $.cookie() plugin

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

这篇关于为每个复选框设置jQuery cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！