Изменить цвет кнопки, если подкнопки имеют определенный цвет

Иметь красную верхнюю кнопку (GC_POD1). Под этой кнопкой есть еще две красные подкнопки (System и Echo_O01). Под каждой подкнопкой есть две галочки. Если отмечены обе галочки под подкнопкой, цвет подкнопки изменится на зеленый. Если обе подкнопки стали зелеными, то верхняя кнопка также должна стать зеленой. Если одна из подкнопок красная, то и верхняя кнопка тоже должна быть красной.

Измените цвет подкнопок, если галочки отмечены, работает нормально. Но только изменение цвета верхней кнопки не работает

function checkbox_checked() {
  var chks = document.querySelectorAll('input[name^=cb_system1_]')
  if (chks[0].checked && chks[1].checked)
    document.getElementById("b_system1").style.backgroundColor = 'green';
  else
    document.getElementById("b_system1").style.backgroundColor = 'red';
  var chks = document.querySelectorAll('input[name^=cb_echo_01_]')
  if (chks[0].checked && chks[1].checked)
    document.getElementById("b_echo_01").style.backgroundColor = 'green';
  else
    document.getElementById("b_echo_01").style.backgroundColor = 'red';
}

function checkGC_POD1() {

  var btnSYS = document.getElementById('b_system1');
  var btnE1 = document.getElementById('b_echo_01');

  var color = ((btnSYS.classList.contains('green')) && (btnE1.classList.contains('green'))) ? "green" : "red";
  console.info(btnSYS.classList, btnE1.classList, color)
  var btn = document.getElementById('buttonPOD1');
  btn.classList.remove("green", "red");
  btn.classList.add(color);

  if (btnSYS.style.backgroundColor = 'green' && btnE1.style.backgroundColor = 'green')
    document.getElementById("buttonPOD1").style.backgroundColor = 'green';
  else
    document.getElementById("buttonPOD1").style.backgroundColor = 'red';
}
table,
th,
td {
  border: 1px solid black;
}

button {
  height: 40px;
  width: 160px;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color: red;
  color: yellow;
  padding: 12px 15px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

button.green,
input.green {
  background: green;
}

.button1 {
  background: red
}

.button1:hover {
  background-color: green;
}

.button2 {
  background-color: green;
}

.buttonsmall {
  background-color: #FF0000;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color: white;
}

.buttonsmall:hover {
  background-color: green;
}


/* The container */

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default checkbox */

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}


/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
  background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.container input:checked~.checkmark {
  background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.container input:checked~.checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */

.container .checkmark:after {
  left: 9px;
  top: 3px;
  width: 3px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<body onload = "beginfase()" style = "background-color:#E3CEF6;">

  <button id = "buttonPOD1" onclick = "showOrHide('GCPOD1')" class = "button1" name = "GCPOD1"><b>GC_POD1</b></button>
  <!-- Insert a table in a div, so this can be hide -->
  <div id = "GCPOD1">
    <br>
    <div id = "System_button">
      <table style = "width:20%;margin-left:50px;">
        <colgroup>
          <col span = "3" style = "background-color:#E3CEF6;">
          <!--<col style = "background-color:yellow"> -->
        </colgroup>
        <tr>
          <td width = "20%"><input type = "button" id = "b_system1" class = "buttonsmall" style = "height:20px;width:60px" onclick = "showOrHide('System')">
          </td>
          <td width = "40%"><b>System</></td>
        <td  width = "15%"></td> 
    	<td  width = "15%"></td>
        <td  width = "10%"></td>	
      </tr> 
      </table>
      </div> <!-- Close Div System_button --> 
     <div id = "System">
    <table style = "width:50%;margin-left:50px;" >
     <colgroup>
        <col span = "3" style = "background-color:#E3CEF6;">
        <!--<col style = "background-color:yellow"> -->
      </colgroup>
      <tr>
        <td  width = "10%">
          <label class = "container">
            <input type = "checkbox" name = "cb_system1_1" onchange = "checkbox_checked(this)">
            <span class = "checkmark"></span>
          </label>
        </td>
        <td  width = "30%">Plate Hotel_O01 empty </td>
        <td  width = "10%"></td>
    	<td  width = "10%"></td>
        <td  width = "40%"><textarea name = "Comment" cols = "40" rows = "1" onkeyup = "AutoGrowTextArea(this)" ></textarea></td>
       </tr>
      <tr>
        <td width = "10%">
          <label class = "container">
            <input type = "checkbox" name = "cb_system1_2" onchange = "checkbox_checked(this)">
            <span class = "checkmark"></span>
          </label>
        </td>
        <td width = "30%">Plate Hotel_O02 empty</td>
        <td width = "10%"></td> 
    	<td width = "10%"></td>
        <td width = "40%"><textarea name = "Comment" cols = "40" rows = "1" onkeyup = "AutoGrowTextArea(this)" ></textarea></td>	
      </tr> 
         </table>
       </div> <!-- Close Div System -->
       <div id = "Echo_O01_button">
     <table style = "width:20%;margin-left:50px;" >
     <colgroup>
        <col span = "3" style = "background-color:#E3CEF6;">
        <!--<col style = "background-color:yellow"> -->
      </colgroup>
      <tr id = "rowA">
        <td  width = "20%"><input type = "button" id = "b_echo_01" class = "buttonsmall" style = "height:20px;width:60px" onclick = "showOrHide('Echo_O01')">      
        </td>
        <td  width = "40%"><b>Echo555_O01</></td>
        <td  width = "15%"></td> 
    	<td  id = "celA" width = "15%" bgcolor = "yellow"><input type = "checkbox" name = "notinrun6" id = "chkrowA" onclick = "ChangeRowColor(this,'rowA','celA')"/></td>
        <td  width = "10%"></td>	
      </tr> 
      </table>
      </div> <!-- Close Div Echo_O01_button --> 
     <div id = "Echo_O01">
     <table style = "width:50%;margin-left:50px;" >
     <colgroup>
        <col span = "3" style = "background-color:#E3CEF6;">
        <!--<col style = "background-color:yellow"> -->
      </colgroup>
      <tr>
        <td width = "10%">
          <label class = "container">
            <input type = "checkbox" name = "cb_echo_01_1" onchange = "checkbox_checked(this)">
            <span class = "checkmark"></span>
          </label>
        </td>
        <td width = "30%">Protocol Present</td>
        <td width = "10%"></td>
    	<td width = "10%"></td>
        <td width = "40%"><textarea name = "Comment" cols = "40" rows = "1" onkeyup = "AutoGrowTextArea(this)" ></textarea></td>    
      </tr> 
      <tr>
        <td width = "10%">
          <label class = "container">
            <input type = "checkbox" name = "cb_echo_01_2" onchange = "checkbox_checked(this)">
            <span class = "checkmark"></span>
          </label>
        </td>
        <td width = "30%">Diagnostics both empty</td>
        <td width = "10%"></td>
    	<td width = "10%"></td>
        <td width = "40%"><textarea name = "Comment" cols = "40" rows = "1" onkeyup = "AutoGrowTextArea(this)" ></textarea></td>    
      </tr> 
    </table>
    </div>	<!-- Close Div GCPOD1 -->
    </body>

ожидайте, что верхняя кнопка изменится с красной на зеленую, если подкнопки зеленые.

Не могли бы вы оставить только те части кода, которые необходимы для решения вашей проблемы?

— Kévin Bibollet 25.04.2019 09:07

У вас много кода для нескольких кнопок. Пожалуйста, удалите нерелевантный код!

— Dat Boi Trump 25.04.2019 09:31
javascript html
25.04.2019 09:05
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
73
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

если вы собираетесь использовать больше флажков и кнопок, возможно, вам нужен шаблон (в данном случае наблюдатель... или псевдонаблюдатель)... в вашем коде замените:

onchange = "javascript:checkbox_checked(this)"

за это:

onchange = "javascript:checkChecks();"

и в вашем блоке Javascript поместите этот код:

window.event_check_arr = [];
// first register your check with yours buttons
registerButtonWithChecks( document.getElementById("b_system1"), [document.getElementsByName("cb_system1_1"), document.getElementsByName("cb_system1_2")] );
registerButtonWithChecks( document.getElementById("b_echo_01"), [document.getElementsByName("cb_echo_01_1"), document.getElementsByName("cb_echo_01_2")] );

function registerButtonWithChecks(button, arr_checks){
  window.event_check_arr.push( {'btn_name' :button.id, 'arr': arr_checks })
}

function checkChecks(){
    t = true; // boolean for big button
    for(var i in window.event_check_arr){
        b = true; // boolean for small buttons
        for(var x in window.event_check_arr[i]['arr'])
            // if is NOT checked, button not will be green
            if (! window.event_check_arr[i]['arr'][x][0].checked) b = false;
            if (!b){
                t = false;
                document.getElementById(window.event_check_arr[i]['btn_name']).style.backgroundColor='red';
            } else 
                document.getElementById(window.event_check_arr[i]['btn_name']).style.backgroundColor='green';
        }
    // if all buttons are green (or if all checks are checked) big button are green
    if (t) document.getElementById('buttonPOD1').style.backgroundColor ='green';
    else document.getElementById('buttonPOD1').style.backgroundColor ='red';
}

Может быть, это не элегантно, потому что вызывается каждый раз, когда проверяется, но это решает проблему. Полный код работает в скрипке

<!DOCTYPE html>
<html>
<head>
 <style>
table, th, td {
    border: 1px solid black;
}
button {
  height:40px;
  width:160px;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:red;
  color: yellow;
  padding: 12px 15px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

button.green,input.green {
   background: green;
}

.button1 { background: red }

.button1:hover {
  background-color: green;
}
.button2 {
  background-color: green;
}
.buttonsmall{
  background-color: #FF0000;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:white;
}
.buttonsmall:hover {
  background-color: green;
}

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 3px;
    width: 3px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

</style>
</head>
 <body onload = "beginfase()" style = "background-color:#E3CEF6;" >

<button id = "buttonPOD1" onclick = "showOrHide('GCPOD1')" class = "button1" name= "GCPOD1" ><b>GC_POD1</b></button> 
<!-- Insert a table in a div, so this can be hide -->
<div id = "GCPOD1">
<br>    
 <div id = "System_button">
 <table style = "width:20%;margin-left:50px;" >
 <colgroup>
    <col span = "3" style = "background-color:#E3CEF6;">
    <!--<col style = "background-color:yellow"> -->
  </colgroup>
  <tr>
    <td  width = "20%"><input type = "button" id = "b_system1" class = "buttonsmall" style = "height:20px;width:60px" onclick = "showOrHide('System')">      
    </td>
    <td  width = "40%"><b>System</></td>
    <td  width = "15%"></td> 
    <td  width = "15%"></td>
    <td  width = "10%"></td>  
  </tr> 
  </table>
  </div> <!-- Close Div System_button --> 
 <div id = "System">
<table style = "width:50%;margin-left:50px;" >
 <colgroup>
    <col span = "3" style = "background-color:#E3CEF6;">
    <!--<col style = "background-color:yellow"> -->
  </colgroup>
  <tr>
    <td  width = "10%">
      <label class = "container">
        <input type = "checkbox" name = "cb_system1_1" onchange = "javascript:checkChecks();">
        <span class = "checkmark"></span>
      </label>
    </td>
    <td  width = "30%">Plate Hotel_O01 empty </td>
    <td  width = "10%"></td>
    <td  width = "10%"></td>
    <td  width = "40%"><textarea name = "Comment" cols = "40" rows = "1" onkeyup = "AutoGrowTextArea(this)" ></textarea></td>
   </tr>
  <tr>
    <td width = "10%">
      <label class = "container">
        <input type = "checkbox" name = "cb_system1_2" onchange = "javascript:checkChecks();">
        <span class = "checkmark"></span>
      </label>
    </td>
    <td width = "30%">Plate Hotel_O02 empty</td>
    <td width = "10%"></td> 
    <td width = "10%"></td>
    <td width = "40%"><textarea name = "Comment" cols = "40" rows = "1" onkeyup = "AutoGrowTextArea(this)" ></textarea></td>  
  </tr> 
     </table>
   </div> <!-- Close Div System -->
   <div id = "Echo_O01_button">
 <table style = "width:20%;margin-left:50px;" >
 <colgroup>
    <col span = "3" style = "background-color:#E3CEF6;">
    <!--<col style = "background-color:yellow"> -->
  </colgroup>
  <tr id = "rowA">
    <td  width = "20%"><input type = "button" id = "b_echo_01" class = "buttonsmall" style = "height:20px;width:60px" onclick = "showOrHide('Echo_O01')">      
    </td>
    <td  width = "40%"><b>Echo555_O01</></td>
    <td  width = "15%"></td> 
    <td  id = "celA" width = "15%" bgcolor = "yellow"><input type = "checkbox" name = "notinrun6" id = "chkrowA" onclick = "ChangeRowColor(this,'rowA','celA')"/></td>
    <td  width = "10%"></td>  
  </tr> 
  </table>
  </div> <!-- Close Div Echo_O01_button --> 
 <div id = "Echo_O01">
 <table style = "width:50%;margin-left:50px;" >
 <colgroup>
    <col span = "3" style = "background-color:#E3CEF6;">
    <!--<col style = "background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width = "10%">
      <label class = "container">
        <input type = "checkbox" name = "cb_echo_01_1" onchange = "javascript:checkChecks();">
        <span class = "checkmark"></span>
      </label>
    </td>
    <td width = "30%">Protocol Present</td>
    <td width = "10%"></td>
    <td width = "10%"></td>
    <td width = "40%"><textarea name = "Comment" cols = "40" rows = "1" onkeyup = "AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width = "10%">
      <label class = "container">
        <input type = "checkbox" name = "cb_echo_01_2" onchange = "javascript:checkChecks();">
        <span class = "checkmark"></span>
      </label>
    </td>
    <td width = "30%">Diagnostics both empty</td>
    <td width = "10%"></td>
    <td width = "10%"></td>
    <td width = "40%"><textarea name = "Comment" cols = "40" rows = "1" onkeyup = "AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
</table>
</div>  <!-- Close Div GCPOD1 -->

 <script type = "text/javascript">

 

window.event_check_arr = [];
// first register your check with yours buttons
registerButtonWithChecks( document.getElementById("b_system1"), [document.getElementsByName("cb_system1_1"), document.getElementsByName("cb_system1_2")] );
registerButtonWithChecks( document.getElementById("b_echo_01"), [document.getElementsByName("cb_echo_01_1"), document.getElementsByName("cb_echo_01_2")] );

function registerButtonWithChecks(button, arr_checks){
  window.event_check_arr.push( {'btn_name' :button.id, 'arr': arr_checks })
}

function checkChecks(){
	t = true;
	for(var i in window.event_check_arr){
		b = true;
		for(var x in window.event_check_arr[i]['arr'])
			if (! window.event_check_arr[i]['arr'][x][0].checked) b = false;
			if (!b){
				t = false;
				document.getElementById(window.event_check_arr[i]['btn_name']).style.backgroundColor='red';
			} else 
				document.getElementById(window.event_check_arr[i]['btn_name']).style.backgroundColor='green';
		}
	if (t) document.getElementById('buttonPOD1').style.backgroundColor ='green';
	else document.getElementById('buttonPOD1').style.backgroundColor ='red';
}


</script>
  </body>
</html>

Привет, Манхэттен. Если я запускаю этот код отдельно, он работает хорошо, но если я пытаюсь интегрировать его в исходный код, он терпит неудачу. Есть несколько div с кнопками и флажками. В других div кнопки меняют цвет. Только в этом div есть верхняя кнопка с 10 подкнопками. У вас есть идея, в чем может быть проблема

— Orca 25.04.2019 12:33

Я заменил во всем коде onchange = "javascript:checkbox_checked(this)", как вы предложили.

— Orca 25.04.2019 12:35

Извините, я не могу понять, что у вас сейчас происходит с вашим кодом. Работает частично? Вы не забыли зарегистрировать кнопки с их соответствующими флажками? Я попытался вставить код, не удаляя ничего, что вы сделали, и не заменяя его, и он не работает, возможно, я чего-то не вижу, и он «сталкивается».

— manhattan 25.04.2019 14:07
25.04.2019 10:24

Используйте эту функцию и поместите отдельный тег script для проверки функции GC_POD1(), она работает хорошо.



function checkbox_checked()
{

var chks = document.querySelectorAll('input[name^=cb_system1_]')
  if (chks[0].checked && chks[1].checked)
    document.getElementById("b_system1").style.backgroundColor='green';
  else 
  document.getElementById("b_system1").style.backgroundColor='red';
  var chks1 = document.querySelectorAll('input[name^=cb_echo_01_]')
  if (chks1[0].checked && chks1[1].checked)
    document.getElementById("b_echo_01").style.backgroundColor='green';
  else 
  document.getElementById("b_echo_01").style.backgroundColor='red';


if (chks1[0].checked && chks1[1].checked && chks[0].checked && chks[1].checked)
document.getElementById("buttonPOD1").style.backgroundColor='green';
else 
document.getElementById("buttonPOD1").style.backgroundColor='red';

      } 


</script>


<script>

function checkGC_POD1(){

    var btnSYS = document.getElementById('b_system1');
    var btnE1 = document.getElementById('b_echo_01');   

    var color = ((btnSYS.classList.contains('green')) && (btnE1.classList.contains('green'))) ? "green" : "red";
    console.info(btnSYS.classList, btnE1.classList, color)
    var btn = document.getElementById('buttonPOD1');
        btn.classList.remove("green", "red");
        btn.classList.add(color);

  if (btnSYS.style.backgroundColor='green' && btnE1.style.backgroundColor='green' )
    document.getElementById("buttonPOD1").style.backgroundColor='green';
  else 
    document.getElementById("buttonPOD1").style.backgroundColor='red';
} 
</script>
25.04.2019 10:26

Другие вопросы по теме

Тип ввода=файл не может принимать изображения большого размера
Выпадающее меню css не отображается в браузере iMac Safari
Более простой способ запрограммировать изменение фона по клику — HTML/CSS
Экранная клавиатура JQuery и CSS не работает в ремейке HTML
Проверка ввода с помощью цвета баннера и текстового поля
Ограничить пространство в первой позиции в текстовом поле с помощью Angular 6
Как указать полную ширину и высоту поля ввода
Обтекание изображения текстом с помощью Bootstrap 4
Использование Nodejs для рендеринга html-css-javascript-изображений
Реализация чипов

Похожие вопросы

Невозможно вызвать функцию после минификации
Создайте регулярное выражение для соответствия URL-адресу
Выпадающее меню css не отображается в браузере iMac Safari
Влияет ли оператор распространения на производительность?
Регулярное выражение для перехвата строки, включая ;(точка с запятой)
Как переписать с обратным вызовом для обещанного результата
Реализация составной функции с несколькими аргументами с использованием reduceRight()
Экранная клавиатура JQuery и CSS не работает в ремейке HTML
Javascript динамически перемещает содержимое текстового поля в поле
Проверка ввода с помощью цвета баннера и текстового поля