Блог

Главная - Вопросы по программированию - изменить цвет кнопки, если вложенные кнопки имеют определенный цвет

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

#javascript #html

#javascript #HTML

Вопрос:

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

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

 function checkbox_checked() {
  var chks = document.querySelectorAll('input[name^=cb_system1_]')
  if (chks[0].checked amp;amp; 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 amp;amp; 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')) amp;amp; (btnE1.classList.contains('green'))) ? "green" : "red";
  console.log(btnSYS.classList, btnE1.classList, color)
  var btn = document.getElementById('buttonPOD1');
  btn.classList.remove("green", "red");
  btn.classList.add(color);

  if (btnSYS.style.backgroundColor = 'green' amp;amp; 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>

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

Комментарии:

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

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

Ответ №1:

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

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';
}

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

 <!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>

Комментарии:

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

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

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

Ответ №2:

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

 

function checkbox_checked()
{

var chks = document.querySelectorAll('input[name^=cb_system1_]')
  if(chks[0].checked amp;amp; 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 amp;amp; chks1[1].checked)
    document.getElementById("b_echo_01").style.backgroundColor='green';
  else 
  document.getElementById("b_echo_01").style.backgroundColor='red';


if(chks1[0].checked amp;amp; chks1[1].checked amp;amp; chks[0].checked amp;amp; 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')) amp;amp; (btnE1.classList.contains('green'))) ? "green" : "red";
    console.log(btnSYS.classList, btnE1.classList, color)
    var btn = document.getElementById('buttonPOD1');
        btn.classList.remove("green", "red");
        btn.classList.add(color);

  if(btnSYS.style.backgroundColor='green' amp;amp; btnE1.style.backgroundColor='green' )
    document.getElementById("buttonPOD1").style.backgroundColor='green';
  else 
    document.getElementById("buttonPOD1").style.backgroundColor='red';
} 
</script>