Как сохранить значение checkbox при перезагрузки по классу
Есть формы
<input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="3W Clinic"> <input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="Esthetic House"> <input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="Koelf"> и т.д. класс у них у всех одинаковый а name разные. Необходимо сохранить значение при перезагрузки. Пытался сам но не получается. Помогите пожалуйста. побывал и так <script> $(document).ready(function() { $.cookie('pname', $('input[name=3W Clinic]:checked').val() , { expires: 1 }); $("input[name=3W Clinic]:checked").val($.cookie('pname')); }); </script> и так <script> $(document).ready(function() { var vibor = (".js-store-filter-opt").val(); $.cookie('pname', vibor).val() , { expires: 1 }); $("input[name=3W Clinic]:checked").val($.cookie('pname')); }); </script> |
Используйте LocalStorage не зачем cookie там
|
Попробовал так не работает
<script type="text/javascript"> var vibor = $('input[name=brand]:hidden').val(); $.localStorage.setItem('pname', vibor); $("input[name=brand]:hidden").val($.localStorage.getItem('pname')); </script> может ошибка где? |
Цитата:
|
|
У меня структура странная поэтому всяка пытаюсь. Сама структура:
<div class="t-store__filter__item-controls-container"> <input type="hidden" class="js-store-filter-opt" name="brand" data-info-type="array"> <label class="t-checkbox__control t-descr t-descr_xxs"> <input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="3W Clinic"> <div class="t-checkbox__indicator"></div>3W Clinic </label> <label class="t-checkbox__control t-descr t-descr_xxs"> <input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="Elizavecca"> <div class="t-checkbox__indicator"></div>Elizavecca </label> <label class="t-checkbox__control t-descr t-descr_xxs"> <input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="Esthetic House"> <div class="t-checkbox__indicator"></div>Esthetic House </label> <label class="t-checkbox__control t-descr t-descr_xxs"> <input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="Koelf"> <div class="t-checkbox__indicator"></div>Koelf </label> </div> есть input который сохраняет результат нажатие name="brand" побывал его сохранять. Если галочки нажаты то выдает: value="3W Clinic&&Elizavecca&&Esthetic House&&Koelf" как грамотно сохранить результат нажатие. |
svileff,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
svileff,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="t-store__filter__item-controls-container">
<input type="hidden" class="js-store-filter-opt" name="brand" data-info-type="array">
<label class="t-checkbox__control t-descr t-descr_xxs">
<input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="3W Clinic">
<div class="t-checkbox__indicator"></div>3W Clinic
</label>
<label class="t-checkbox__control t-descr t-descr_xxs">
<input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="Elizavecca">
<div class="t-checkbox__indicator"></div>Elizavecca
</label>
<label class="t-checkbox__control t-descr t-descr_xxs">
<input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="Esthetic House">
<div class="t-checkbox__indicator"></div>Esthetic House
</label>
<label class="t-checkbox__control t-descr t-descr_xxs">
<input class="t-checkbox js-store-filter-opt-chb" type="checkbox" name="Koelf">
<div class="t-checkbox__indicator"></div>Koelf
</label>
</div>
<script>
(function(b) {
var e = document.querySelectorAll(b),
a = localStorage.getItem(b),
a = (a = JSON.parse(a)) || (a = {}, localStorage.setItem(b, JSON.stringify(a)));
e.forEach(function(c, d) {
void 0 !== a[d] && (c.checked = a[d]);
c.addEventListener("change", function() {
a[d] = c.checked;
localStorage.setItem(b, JSON.stringify(a))
})
})
})(".t-checkbox");
</script>
</body>
</html>
|
не срабатывает! И что за b значение передается?
|
svileff,
b класс input. Цитата:
|
Структуру я не могу изменить эта проект на Тильде
|
Я не могу понять как правильно записать это для Тильды. Нашёл пример скрипта. Который тильда принимает. Запись в таком виде.
<script> $( document ).ready(function() { var formID = '#rec110219707 .t-form'; $('input[name="controlnum"]').next('.t-calc__wrapper').children('.t-calc').addClass('maintrigger'); $(formID+' .js-successbox').css('opacity' , '0'); $("body").on('DOMSubtreeModified', ".maintrigger", function() { var total = $('.maintrigger').html(); switch (total) { case '1':$(formID).attr('data-success-url', 'https://yandex.ru');break; case '2':$(formID).attr('data-success-url', 'https://google.ru');break; case '3':$(formID).attr('data-success-url', 'https://mail.ru');break; }; }); }); </script> Или надо библиотеки подключать? |
svileff,
скрипт нужно поставить вниз страницы, никаких дополнительных библиотек не требуется. |
Поставил но результата нет!
Вот ссылка на саму страницу, там есть фильтр. Его то я и не могу заставить сохранятся. https://lowo.store/face |
svileff,
нет у вас (".t-checkbox .js-store-filter-opt-chb");!!! пропуск уберите есть (".t-checkbox.js-store-filter-opt-chb"); |
Нужно запоминать наборы не всех, а состояние у их родителей.
|
Сделал так. Не сохраняет!!!
<script> (function(b) { var e = document.querySelectorAll(b), a = localStorage.getItem(b), a = (a = JSON.parse(a)) || (a = {}, localStorage.setItem(b, JSON.stringify(a))); [].forEach.call(e, function(c, d) { void 0 !== a[d] && (c.checked = a[d]); c.addEventListener("change", function() { a[d] = c.checked; localStorage.setItem(b, JSON.stringify(a)) }) }) })(".t-checkbox.js-store-filter-opt-chb"); </script> |
svileff,
если вы добавите/удалите в любой группе правило, то все развалится, то же самое произойдет если будут добавлены/удалены группы. Сохранять нужно не под индексами, а под именованными свойствами, а свойства, которые на текущий момент не имеют адресата, удалять. |
Не совсем понял как это сделать
|
svileff,
надо работать с устройством вашего фильтра, а не с checkbox |
Фильтр идет стандартный у него нет не каких настроек. Поэтому к нему не могу подобраться.
|
Цитата:
В память нужно писать имя выбранного флажка, который затем и будет выбираться. Но так можно поступать, если имя каждого флажка во всех наборах уникальное. Если нет, то родителям (DIV) также нужно дать уникальные признаки, под которыми будут храниться наборы выбранных их флажков. |
Я побывал назначить id для каждого inputa не выходит, тильда не дает
|
Цитата:
|
svileff,
убрать прежний добавить этот вниз, перед </body>
<script>
(function(b) {
var e = document.querySelectorAll(b),
a = localStorage.getItem(b),
a = (a = JSON.parse(a)) || (a = {}, localStorage.setItem(b, JSON.stringify(a)));
var time = 100;
e.forEach(function(c, d) {
if(a[d] == true) {time += 150, window.setTimeout(function() {
$(c).trigger("click")
}, time)};});
document.addEventListener("click", function() {
e.forEach(function(c, d) {
a[d] = c.checked;
})
localStorage.setItem(b, JSON.stringify(a))
})
})(".t-checkbox.js-store-filter-opt-chb");
</script>
|
svileff,
низ страницы, это там где у вас скрипт Yandex.Metrika, после него, и добавьте, между метрикой и body |
тильда не дает вниз поставить, толь ка на верх перед boby
|
Цитата:
тогда так
$(function() {
(function(b) {
var e = document.querySelectorAll(b),
a = localStorage.getItem(b),
a = (a = JSON.parse(a)) || (a = {}, localStorage.setItem(b, JSON.stringify(a)));
var time = 100;
e.forEach(function(c, d) {
if(a[d] == true) {time += 150, window.setTimeout(function() {
$(c).trigger("click")
}, time)};});
document.addEventListener("click", function() {
e.forEach(function(c, d) {
a[d] = c.checked;
})
localStorage.setItem(b, JSON.stringify(a))
})
})(".t-checkbox.js-store-filter-opt-chb");
});
|
так не срабатывает...
|
svileff,
пробуйте
addEventListener("load", function() {
(function(b) {
var e = document.querySelectorAll(b),
a = localStorage.getItem(b),
a = (a = JSON.parse(a)) || (a = {}, localStorage.setItem(b, JSON.stringify(a)));
var time = 100;
e.forEach(function(c, d) {
if(a[d] == true) {time += 150, window.setTimeout(function() {
$(c).trigger("click")
}, time)};});
document.addEventListener("click", function() {
e.forEach(function(c, d) {
a[d] = c.checked;
})
localStorage.setItem(b, JSON.stringify(a))
})
})(".t-checkbox.js-store-filter-opt-chb");
});
|
нечего не произошло.
|
Все заработало поставил после основных скриптов и заработало.
|
Цитата:
|
Не на всех браузерах работает как это можно исправить?
|
в этом проверяли ;)? https://netscape-browser.en.softonic.com/
|
Работает только в Експлорере. В Хроме, Опере и Мазиле не работает.
|
можно поверить наоборот, а эксплорер какой версии был?
|
Версия не знаю какая но Win10 стоит.
|
Может библиотеки нахватает?
|
| Часовой пояс GMT +3, время: 13:19. |