JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>
Выбранные галочки будут запомнены и не исчезнут даже при перезагрузке страницы.<br /><br />
<input type="checkbox" id="ch1"> <label for="ch1">Номер раз</label> <br />
<input type="checkbox" id="ch2"> <label for="ch2">Номер два</label> <br />
<input type="checkbox" id="ch3"> <label for="ch3">Номер три</label> <br /><br />

<button onClick="javascript:clearCookie();">Сбросить Cookie</button>

JavaScript

// функция устанавливающая куки, хранящие состояния checkbox'ов
function cookieFromCheckbox()
{
  var ch = [];
  $("input:checkbox").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();

$("input:checkbox").change(function(){
  cookieFromCheckbox();
});