Сохранение значения чекбокса после перезагрузки страницы

@_marisha · Регистрация: 29.05.2011

Студворк — интернет-сервис помощи студентам

Доброго времени суток!
Есть чекбокс, при отмеченном чекбоксе фон у чекбокса изменяется (скрин "Отмеченный", "Неотмеченный")
Но после обновления страницы чекбокс сбрасывается, т.е. становится неотмеченным и цвет фона белый (скрин "Белый")
Подскажите, пожалуйста, каким образом на основании моего примера сделать сохранение значения чекбокса (отмечен/не отмечен с сохранением цвета фона) после обновления страницы. Спасибо.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<h4><?=GetMessage("COST_OF_ASSEMBLY")?></h4>
<div data-property-id-row="22" class="clearfix">
    <label>
        <div class="bx_logotype">
            <span style="background-image:url(/bitrix/templates/likee_estore_s1/components/bitrix/sale.order.ajax/.default/images/logo-default-d.gif);"></span>
        </div>
    </label>
    <div class="bx_block r1x3 pt8">
        <input
            type="checkbox"
            form="ORDER_FORM"
            name="sbor"
            id="sbor"
            value=""
            <!--value="--><?/*=$arResult['ORDER_PROP']['USER_PROPS_Y'][22]['ID']*/?>"<?/*if (!empty($_POST["SBOR"]) && $_POST["save"] == "Y") echo " checked=\"checked\"";*/?>
            value = "22"
            onclick="highlight(this);"
        />
        <div class="bx_description">
            <?=GetMessage("COST_OF_ASSEMBLY_SUMM")?><span style="font-weight: bold;"> 300</span>
        </div>
    </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
 
function changeTrColor() {
 
    var elem = document.getElementsByTagName('sbor');
 
    for(i = 0; i < elem.length; i++)
    {
 
        var tr = elem[i].parentNode.parentNode;
        var checked = elem[i].checked;
        if (elem[i].checked)
            tr.style.background = "#b2ffb2";
        //document.getElementsByTagName('sbor')[0].value = 5;
    }
}
 
// Вызываем функцию changeTrColor при загрузке страницы
window.onload = changeTrColor;
 
function highlight(chkbox)
{
    chkbox.parentNode.parentNode.style.background = (chkbox.checked ? "#b2ffb2" : "#e0ffff");
    if (chkbox.checked)
    {
        var Sbor = 1;
        if (Sbor == 1)
        {
            //var SborTrue = 2;
            document.cookie = "SborTrue=2";//добавлено значение 2 в куки
            function get_cookie (cookie_name)
            {
                var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
 
                if ( results )
                    return ( unescape ( results[2] ) );
                else
                    return null;
            }
            //session_start();
            var SborTrue = get_cookie ( "SborTrue" );
            alert(SborTrue);
 
 
        }
    }
}
 
</script>

@_marisha · 28.06.2018, 08:30 **[ТС]**

Скрины прилагаю

@_marisha · 29.06.2018, 07:35 **[ТС]**

Подскажите, как изначально сделать фон голубой, т.е. чтобы в случае, если чекбокс не отмечен всегда был голубой фон?

Добавлено через 19 часов 5 минут
Удалось произвести сохранение чекбокса после перезагрузки страницы следующим образом:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h4><?=GetMessage("COST_OF_ASSEMBLY")?></h4>
<div data-property-id-row="22" class="clearfix">
    <label>
        <div class="bx_logotype">
            <span style="background-image:url(/bitrix/templates/likee_estore_s1/components/bitrix/sale.order.ajax/.default/images/logo-default-d.gif);"></span>
        </div>
    </label>
    <div class="bx_block r1x3 pt8">
        <input
            type="checkbox"
            form="ORDER_FORM"
            name="sbor"
            id="sbor"
            value="22"
            onclick="highlight(this); submitForm();"
            <?=$_COOKIE['sbor'] ? 'checked' : ''?>
        />
        <div class="bx_description">
            <?=GetMessage("COST_OF_ASSEMBLY_SUMM")?><span style="font-weight: bold;"> 300</span>
        </div>
    </div>
</div>

JavaScript
1
2
3
4
5
function highlight(chkbox)
{
    document.cookie = 'sbor=' + Number(chkbox.checked) + '; path=/; expires=Mon, 31 Jan 4000 00:00:00 GMT';
}
</script>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@_marisha 11 / 11 / 2 Регистрация: 29.05.2011 Сообщений: 533
	28.06.2018, 08:30 [ТС]
	Скрины прилагаю Миниатюры 0