為每個復選框設置jQuery cookie

Question

我有一個簡單的jQuery函數，可根據復選框狀態切換類。 這是代碼：

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？ 我只是想給這些復選框一些內存...不確定最好的方法。

我懷疑某種類型的.each(function)應該可以做到，但是我仍然是javascript新手。 我嘗試了以下方法：

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

但是，當然，這只會為最近選中的復選框創建一個cookie。 如何為每個創建唯一的cookie？ 還是我什至需要？ 也許有一種方法可以將它們存儲在一個cookie中（一個數組？），然后在頁面加載時簡單地引用該數組以檢查復選框？

有很多見識的義務。

Answer 1

假設您正在使用JQuery Cookie插件 ，因為我看到您在問題中引用了它。

這個給你。 單擊任何復選框都會創建和更改單個cookie文件，僅存儲與復選框對應的data-at值。

在頁面加載時，它會檢索該JSON字符串，將其轉換回一個對象，然后循環遍歷，對任何匹配屬性的框進行勾選。

經過測試的代碼可以正常工作。

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：使用$ .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>