2

Использую плагин jquery.cookie Мне нужно чтобы отмеченные чекбоксы div'ов w_option_left и w_option_right и value импута height_opt сохранялись после перезагрузки страницы, взял скрипт с сайта jquery и смог применить его только для одного импута item_opt_4

/*<-- СОХРАНЕНИЕ ЧЕКБОКСОВ-->*/
    function cookieFromCheckbox()
    {
      var ch = [];
      $("#item_opt_4").each(function(){
        var $el = $(this);
        if($el.prop("checked"))
          ch.push($el.attr("id"));
      });
    
      $.cookie("checkboxCookie", ch.join(','));
    }
    
    // функция восстанавливающая состояния checkbox'ов по кукам
    function checkboxFromCookie()
    {
      if($.cookie("checkboxCookie") == null)
        return;
      var chMap = $.cookie("checkboxCookie").split(',');
      for (var i in chMap)
        $('#'+chMap[i]).prop("checked", true);
    }
    
    // функция сбрасывающая куки с значениями checkbox'ов
    function clearCookie()
    {
      $.cookie("checkboxCookie", null);
    } 
    
    // проверим, были ли установлены ранее кукисы с именем checkboxCookie.
    // если нет - установим их.
    var checkboxCookie = $.cookie("checkboxCookie");
    if(checkboxCookie == null)
    {
      cookieFromCheckbox();
      checkboxCookie = $.cookie("checkboxCookie");
    }
    else
      checkboxFromCookie();
    
    $("#item_opt_4").change(function(){
      cookieFromCheckbox();
    });

/*<-- СОХРАНЕНИЕ ЧЕКБОКСОВ-->*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="words_status">
  <div class="w_option_left">
    <label>
      <input type="checkbox" name="rand" value="случайное" checked />
      <span class="word_opt">случайное</span>
    </label><br>
    <label>
      <input type="checkbox" name="noun" value="существительное" />
      <span class="word_opt">существительное</span>
    </label><br>
    <label>
      <input type="checkbox" name="adject" value="прилагательное" />
      <span class="word_opt">прилагательное</span>
    </label><br>
    <label>
      <input type="checkbox" name="verb" value="глагол" />
      <span class="word_opt">глагол</span>
    </label>
  </div>
  <div class="w_option_right">
    <label>
      <input type="checkbox" name="rand" value="случайное" checked />
      <span class="word_opt">случайное</span>
    </label><br>
    <label>
      <input type="checkbox" name="noun" value="существительное" />
      <span class="word_opt">существительное</span>
    </label><br>
    <label>
      <input type="checkbox" name="adject" value="прилагательное" />
      <span class="word_opt">прилагательное</span>
    </label><br>
    <label>
      <input type="checkbox" name="verb" value="глагол" />
      <span class="word_opt">глагол</span>
    </label>
  </div>
</div>
<center>



<span class="opts_headlines">Длинна пароля:</span> </span><input class="opts_headlines" type="text"  id="height_opt" name="post_data" value="15"  readonly  ></center>


<input type="checkbox" id="item_opt_4"  > Исключать похожие символы&nbsp;<i  data-toggle="tooltip" style="cursor:pointer" data-placement="top" title="B8 G6 I1l| 0OQD S5 Z2">

1 ответ 1

4

Я предлагаю Вам отказаться от плагина и использовать localStorage для вашей задачи.

К сожалению, политика безопасности ruSO не позволяет протестировать localStorage непосредственно в сниппете на сайте, но это можно сделать, например, на JSFiddle.

Исходя из вашей разметки, без использования дополнительных функций, не обойтись:

/* Обработчик клика на чекбоксах */
$('input').on('input', function() {
  let aChecked = [];
  $('input[type="checkbox"]:checked').each(function() { aChecked.push($(this).getPath()); });
  localStorage.setItem('CheckboxChecked', aChecked.join(';'));
  localStorage.setItem('PasswordLength', $('#height_opt').val());
});

/* Установка состояний чекбоксов, после загрузки страницы */
$(document).ready(function() {
  if (localStorage.getItem('CheckboxChecked')) {
    let aChecked = localStorage.getItem('CheckboxChecked').split(';');
    $('input[type="checkbox"]').prop('checked', false);
    aChecked.forEach(function(str) { $(str).prop('checked', true); });
  }
  if (localStorage.getItem('PasswordLength')) {
    $('#height_opt').val(localStorage.getItem('PasswordLength'));
  }
});

/************************************************************
 * Функция для jQ, возвращающая уникальный селектор элемента *
 * Источник: https://stackoverflow.com/a/26762730/10179415   *
 ************************************************************/
jQuery.fn.extend({
  getPath: function() {
    let pathes = [];
    this.each(function(index, element) {
      let path, $node = jQuery(element);
      while ($node.length) {
        let realNode = $node.get(0), name = realNode.localName;
        if (!name) { break; }
        name = name.toLowerCase();
        let parent = $node.parent();
        let sameTagSiblings = parent.children(name);
        if (sameTagSiblings.length > 1) {
          let allSiblings = parent.children();
          let index = allSiblings.index(realNode) + 1;
          if (index > 0) { name += ':nth-child(' + index + ')'; }
        }
        path = name + (path ? '>' + path : '');
        $node = parent;
      }
      pathes.push(path);
    });
    return pathes.join(',');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="words_status">
  <div class="w_option_left">
    <label>
      <input type="checkbox" name="rand" value="случайное" checked />
      <span class="word_opt">случайное</span>
    </label><br>
    <label>
      <input type="checkbox" name="noun" value="существительное" />
      <span class="word_opt">существительное</span>
    </label><br>
    <label>
      <input type="checkbox" name="adject" value="прилагательное" />
      <span class="word_opt">прилагательное</span>
    </label><br>
    <label>
      <input type="checkbox" name="verb" value="глагол" />
      <span class="word_opt">глагол</span>
    </label>
  </div>
  <div class="w_option_right">
    <label>
      <input type="checkbox" name="rand" value="случайное" checked />
      <span class="word_opt">случайное</span>
    </label><br>
    <label>
      <input type="checkbox" name="noun" value="существительное" />
      <span class="word_opt">существительное</span>
    </label><br>
    <label>
      <input type="checkbox" name="adject" value="прилагательное" />
      <span class="word_opt">прилагательное</span>
    </label><br>
    <label>
      <input type="checkbox" name="verb" value="глагол" />
      <span class="word_opt">глагол</span>
    </label>
  </div>
</div>

<center>
  <span class="opts_headlines">Длинна пароля:</span>
  <input class="opts_headlines" type="text" id="height_opt" name="post_data" value="15" readonly></center>

<input type="checkbox" id="item_opt_4"> Исключать похожие символы&nbsp;<i data-toggle="tooltip" style="cursor:pointer" data-placement="top" title="B8 G6 I1l| 0OQD S5 Z2">

Если же каждому элементу input изначально задать id или data--атрибут с уникальным значением, то функция не потребуется (JSFiddle):

/* Обработчик клика на чекбоксах */
$('input[data-check]').on('input', function() {
  let aChecked = [];
  $('input[data-check]:checked').each(function() { aChecked.push($(this).data('check')); });
  localStorage.setItem('CheckboxChecked', aChecked.join(';'));
  localStorage.setItem('PasswordLength', $('#height_opt').val());
});

/* Установка состояний чекбоксов, после загрузки страницы */
$(document).ready(function() {
  if (localStorage.getItem('CheckboxChecked')) {
    $('input[data-check]').prop('checked', false);
    let aChecked = localStorage.getItem('CheckboxChecked').split(';');
    aChecked.forEach(function(str) { $('input[data-check="' + str + '"]').prop('checked', true); });
  }
  if (localStorage.getItem('PasswordLength')) {
    $('#height_opt').val(localStorage.getItem('PasswordLength'));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="words_status">
  <div class="w_option_left">
    <label>
      <input type="checkbox" name="rand" value="случайное" checked data-check="1" />
      <span class="word_opt">случайное</span>
    </label><br>
    <label>
      <input type="checkbox" name="noun" value="существительное" data-check="2" />
      <span class="word_opt">существительное</span>
    </label><br>
    <label>
      <input type="checkbox" name="adject" value="прилагательное" data-check="3" />
      <span class="word_opt">прилагательное</span>
    </label><br>
    <label>
      <input type="checkbox" name="verb" value="глагол" data-check="4" />
      <span class="word_opt">глагол</span>
    </label>
  </div>
  <div class="w_option_right">
    <label>
      <input type="checkbox" name="rand" value="случайное" checked data-check="5" />
      <span class="word_opt">случайное</span>
    </label><br>
    <label>
      <input type="checkbox" name="noun" value="существительное" data-check="6" />
      <span class="word_opt">существительное</span>
    </label><br>
    <label>
      <input type="checkbox" name="adject" value="прилагательное" data-check="7" />
      <span class="word_opt">прилагательное</span>
    </label><br>
    <label>
      <input type="checkbox" name="verb" value="глагол" data-check="8" />
      <span class="word_opt">глагол</span>
    </label>
  </div>
</div>

<center>
  <span class="opts_headlines">Длинна пароля:</span>
  <input class="opts_headlines" type="text" id="height_opt" name="post_data" value="15" readonly></center>

<input type="checkbox" id="item_opt_4" data-check="9"> Исключать похожие символы&nbsp;<i data-toggle="tooltip" style="cursor:pointer" data-placement="top" title="B8 G6 I1l| 0OQD S5 Z2">

3
  • Спасибо большое! Только текстовый input не работает, это который height_opt Commented 16 дек. 2018 в 16:53
  • 1
    @UModeL , "лайкнул" ответ, за хороший совет в пользу LocalStorage.
    – De.Minov
    Commented 16 дек. 2018 в 17:59
  • 1
    @UModeL поздравляю с очередной круглой цифрой 4000 Commented 17 дек. 2018 в 14:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.