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

时间：2019-04-25 07:05:18

标签： javascript html

具有一个红色的顶部按钮（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>

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

2 个答案:

答案 0 :(得分：0)

如果您要使用更多的复选框和按钮，则可能需要在代码中放置模式（在这种情况下，是观察者...或伪观察者）...

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>

答案 1 :(得分：0)

使用此功能，并将单独的脚本标记用于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>
相关问题
最新问题