Проверка чекбокса

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

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

Доброго времени суток!
Необходимо у выбранного чекбокса у "кнопки" менять фон и у span менять надпись на "В сравнениИ" (не у выбранного чекбокса надпись "Сравнить").

PHP/HTML
1
2
3
4
5
6
 <div class="col-5 col-lg-3 put_off" id="compare-active">
<label id="<?= $itemIds['COMPARE_LINK'] ?>">
<input type="checkbox" data-entity="compare-checkbox" id="compare">
<span data-entity="compare-title">Сравнить</span>
</label>
</div>

Делаю так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
document.getElementById('compare').onclick = function() {
if ( this.checked ) {
document.getElementById('button_on_checkbox').innerHTML = 'В сравнениИ';
document.getElementById('compare-active').classList.add('compare-active');
console.log("В сравнениИ");
} else {
document.getElementById('button_on_checkbox').innerHTML = 'Сравнить';
document.getElementById('compare-active').classList.remove('compare-active');
console.log("Сравнить");
}
};

CSS
1
2
3
4
5
6
.compare-active
{
    background: #FCAC7D;
    left: 0;
    color: #fff;
}

В таком случае, если именно у чекбокса галку установить, то надпись и фон меняется.
А если кликать на span, то галка устанавливается, а вот надпись и фон не меняется.
Пример:
1) изначально, при загруженной странице надпись "Сравнить"
2) если отметить чекбокс, то надпись меняется на "В сравнениИ", "кнопка" закрашивается - верно
3) если убрать чекбокс, то надпись меняется на "Сравнить", кнопка становится без фона - верно
4) если кликнуть на саму надпись "Сравнить", то галка устанавливается, только вот надпись на "В сравнениИ" не меняется и фон также не применяется

Подскажите, пожалуйста, что делаю не так?

Добавлено через 11 минут
Причем здесь всё работает

@_marisha · 12.03.2020, 10:49 **[ТС]**

Есть доп скрипт, в котором происходит обработка чекбокса

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
compare: function(event)
{
var checkbox = this.obCompare.querySelector('[data-entity="compare-checkbox"]'),//input
target = BX.getEventTarget(event);//span
checked = true;
if (checkbox) {
var checked = target === checkbox ? checkbox.checked : !checkbox.checked;
/*Добавлена проверка*/
if (checked == true)
{
document.getElementById('button_on_checkbox').innerHTML = 'В сравнении';
document.getElementById('compare-active').classList.add('compare-active');
}
else
{
document.getElementById('button_on_checkbox').innerHTML = 'Сравнить';
document.getElementById('compare-active').classList.remove('compare-active');
}
/*Добавлена проверка*/
}
var url = checked ? this.compareData.compareUrl : this.compareData.compareDeleteUrl, compareLink;
if (url)
{
if (target !== checkbox)
{
BX.PreventDefault(event);
this.setCompared(checked);
}
switch (this.productType)
{
case 0: // no catalog
case 1: // product
case 2: // set
compareLink = url.replace('#ID#', this.product.id.toString());
break;
case 3: // sku
compareLink = url.replace('#ID#', this.offers[this.offerNum].ID);
break;
}
BX.ajax({
method: 'POST',
dataType: checked ? 'json' : 'html',
url: compareLink + (compareLink.indexOf('?') !== -1 ? '&' : '?') + 'ajax_action=Y',
onsuccess: checked
? BX.proxy(this.compareResult, this)
: BX.proxy(this.compareDeleteResult, this)
});
}
},

Только в данном случае добавление в сравнение работает если пользователь авторизован.
Если пользователь не авторизован, тогда в хроме ошибка "Uncaught TypeError: Cannot read property 'classList' of null".
Конкретно ругается на строки

JavaScript
1
document.getElementById('compare-active').classList.add('compare-active');

и

JavaScript
1
document.getElementById('compare-active').classList.remove('compare-active');

Подскажите, пожалуйста, в чем может заключаться такое поведение? Спасибо.

Добавлено через 12 минут
Видимо что-то с кэшем было, тк у неавторизованного пользователя не было id="compare-active"

Теперь вопрос в другом, каким образом сделать так, чтобы и фон и надпись у отмеченного чекбокса оставались после пересохранения страницы

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .