Как изменить стиль при выборе checkbox и нажатии кнопки

@alanat · Регистрация: 16.07.2012

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

Добрый день.
Написал код, который должен после выбора checkbox и нажатии на input менять цвет дива на красный.
К сожалению, код не работает.

CSS

.gifbox
{
    width:100px;
    height:100px;
    border:1px solid;
    margin:5px;
}

HTML5

<div class="gifbox" id="gifbox1"><input id="checkbox1" type="checkbox"></div>
<div class="gifbox" id="gifbox2"><input id="checkbox2" type="checkbox"></div>
<div class="gifbox" id="gifbox3"><input id="checkbox3" type="checkbox"></div>
<input type="button" value="Проверить" onclick="addition();">

Javascript

function addition() {
for (var n=1; n<=3; n++){
        if (['checkbox'+ n].checked) document.querySelectorAll("#gifbox"+n).forEach(function(div){div.style.backgroundColor = "red"});
}
}

Как правильно написать код, чтобы работал, как задумано?
Заранее благодарен за ответ.

@shsv382 · 04.05.2020, 14:05

Javascript

1
2
3

[].forEach.call(document.querySelectorAll("input[type=checkbox]"), (checkbox => {
    checkbox.onchange = addition
}))

@alanat · 04.05.2020, 14:24 **[ТС]**

Сообщение от shsv382

[].forEach.call(document.querySelectorAll("input[type=checkbox]"), (checkbox => {
checkbox.onchange = addition
}))

Это куда или вместо?

@shsv382 · 04.05.2020, 15:09

это после

Сообщение от alanat

Javascript

function addition() {
for (var n=1; n<=3; n++){
        if (['checkbox'+ n].checked) document.querySelectorAll("#gifbox"+n).forEach(function(div){div.style.backgroundColor = "red"});
}
}

@alanat · 04.05.2020, 18:03 **[ТС]**

Сообщение от shsv382

это после

Javascript

function addition() {
for (var n=1; n<=3; n++){
        if (['checkbox'+ n].checked) document.querySelectorAll("#gifbox"+n).forEach(function(div){div.style.backgroundColor = "red"});
}
}
 
[].forEach.call(document.querySelectorAll("input[type=checkbox]"), (checkbox => {
    checkbox.onchange = addition
}))

Не работает

@shsv382 · 04.05.2020, 20:34

alanat, хоспаде, шож за вас все очеловечивать-то надо...

Javascript

[].forEach.call(document.querySelectorAll("input[type=checkbox]"), (checkbox => {
    checkbox.onchange = function(e) {
      e.target.parentElement.style.backgroundColor = e.target.checked ? "red" : ""
    }
}))

работает, проверено
https://jsfiddle.net/shsv382/ctdqjpa1/2/

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 750
	04.05.2020, 14:24 [ТС]	3
	Сообщение от shsv382 [].forEach.call(document.querySelectorAll("input[type=checkbox]"), (checkbox => { checkbox.onchange = addition })) Это куда или вместо? 0

	04.05.2020, 20:34