JSFiddle - React, Tailwind, and code Playground
HTML
<section class="conteiner">
<div class="checkbox">
<input type="checkbox" class="i-6" id="i6" value="1">
<label for="i6" tabindex="12">Выполнять стандарты по времени обслуживания</label>
</div>
<div class="checkbox">
<input type="checkbox" class="i-6" id="i7" value="0">
<label for="i7" tabindex="13">Время ожидания в очереди 120 секунд</label>
</div>
<div class="checkbox">
<input type="checkbox" class="i-6" id="checkbox_68" value="1">
<label for="checkbox_68" tabindex="14">Время ожидания в очереди 90 секунд</label>
</div>
<div class="checkbox">
<input type="checkbox" class="i-6" id="checkbox_69" value="1">
<label for="checkbox_69" tabindex="15">Время обслуживания 90 секунд</label>
</div>
<div class="checkbox">
<input type= "checkbox" class="i-6" id="checkbox_70" value="0">
<label for="checkbox_70" tabindex="16">Время обслуживания 120 секунд</label>
</div>
<div class="checkbox">
<input type="checkbox" class="i-6" id="checkbox_71" value="0">
<label for="checkbox_71" tabindex="17">Время обслуживания 60 секунд</label>
</div>
<div class="out-block out-6"></div>
<br><br>
<input id="button" type="button" value="ПРОВЕРИТЬ">
</section>
CSS
#button {
cursor: pointer;
}
.right {
background-color: green;
}
.false {
background-color: red;
}
JavaScript
let listCheckbox = document.querySelectorAll('.i-6');
let button = document.getElementById('button');
button.addEventListener('click', function (e) {
for(i=0; i<listCheckbox.length; i++){
let chekcbox = listCheckbox[i].closest('div');
if((listCheckbox[i].checked == true && listCheckbox[i].value == 1) || (listCheckbox[i].checked == false && listCheckbox[i].value == 0)) {
chekcbox.classList.add("right");
chekcbox.classList.remove("false");
}
else{
chekcbox.classList.add("false");
chekcbox.classList.remove("right");
}
}
});