时间戳

首页 > 解决方案 > 如果子按钮具有特定颜色，则更改按钮的颜色

javascript - 如果子按钮具有特定颜色，则更改按钮的颜色

问题描述

有一个红色的顶部按钮 (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.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' && 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>

如果子按钮为绿色，则期望顶部按钮从红色变为绿色。

标签： javascripthtml

解决方案

使用此函数并为 checkGC_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.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' && btnE1.style.backgroundColor='green' )
    document.getElementById("buttonPOD1").style.backgroundColor='green';
  else 
    document.getElementById("buttonPOD1").style.backgroundColor='red';
} 
</script>

推荐阅读