具有一个带有两个子按钮的主按钮。如果选中子按钮后面的复选框，则子按钮从红色变为绿色。如果两个子按钮均为绿色，则主按钮应从红色变为绿色
试图创建一个脚本来做到这一点。如果我运行不带“ ChangeGCPOD”功能的代码，则如果选中此复选框，则子按钮会更改颜色。但是使用功能“ ChangeGCPOD”，子按钮不会更改颜色，主按钮也不会更改颜色
// If checkbox is checked equipment is NOT in run, then background row equipment change to grey and Color button from red to green-->
function ChangeRowColor(chkrow, row, cel, btn) {
var varrow = document.getElementById(row);
var varcel = document.getElementById(cel);
var varColor = "#E3CEF6";
var varColor2 = "Yellow";
if (chkrow.checked == true) {
varColor = "Grey";
varColor2 = "Grey";
document.getElementById(btn).style.backgroundColor = 'green';
} else {
document.getElementById(btn).style.backgroundColor = 'red';
}
varrow.style.backgroundColor = varColor;
varcel.style.backgroundColor = varColor2;
ChangeGCPOD();
}
function ChangeGCPOD() {
var varE1 = document.getElementById('b_echo_01');
var varE2 = document.getElementById('b_echo_02');
var varColor = "red";
var varColor2 = "green";
if (varE1.style.backgroundColor = varColor2 && varE2.style.backgroundColor = varColor2) {
document.getElementById('gcpod').style.backgroundColor = 'green';
} else {
document.getElementById('gcpod').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;
}
.buttonsmall {
background-color: #FF0000;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color: white;
}
.buttonsmall:hover {
background-color: green;
}<!DOCTYPE html>
<html>
<body>
<!-- Create extra space -->
<p><br><br></p>
<!-- Create extra space -->
<p><br></p>
<body>
<!-- Create extra space -->
<p><br><br></p>
<!-- Create extra space -->
<p><br></p>
<div id="GC">
<button id="gcpod" class="buttonsmall" style="height:20px;width:60px">
</div>
<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', 'b_echo_01')"/></td>
<td width="10%"></td>
</tr>
</table>
</div> <!-- Close Div Echo_O01_button -->
<!-- <p><br></p> -->
<div id="Echo_O02_button">
<table style="width:20%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<!--<col style="background-color:yellow"> -->
</colgroup>
<tr id="rowB">
<td width="20%"><input type="button" id = "b_echo_02" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O02')">
</td>
<td width="40%"><b>Echo555_O02</></td>
<td width="15%"></td>
<td id="celB" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowB" onclick="ChangeRowColor(this,'rowB','celB', 'b_echo_02')"/></td>
<td width="10%"></td>
</tr>
</table>
</div> <!-- Close Div Echo_O02_button -->
</body>
</html>
如果两个子键都为绿色，则希望更改主按钮的颜色
答案 0 :(得分：1)
实际上您的逻辑是正确的，只是条件错误，您在=行中使用==而不是if (varE1.style.backgroundColor = varColor2 && varE2.style.backgroundColor = varColor2)
function ChangeRowColor(chkrow, row, cel, btn) {
var varrow = document.getElementById(row);
var varcel = document.getElementById(cel);
var varColor = "#E3CEF6";
var varColor2 = "Yellow";
if (chkrow.checked == true) {
varColor = "Grey";
varColor2 = "Grey";
document.getElementById(btn).style.backgroundColor = 'green';
} else {
document.getElementById(btn).style.backgroundColor = 'red';
}
varrow.style.backgroundColor = varColor;
varcel.style.backgroundColor = varColor2;
ChangeGCPOD();
}
function ChangeGCPOD() {
var varE1 = document.getElementById('b_echo_01');
var varE2 = document.getElementById('b_echo_02');
var varColor = "red";
var varColor2 = "green";
if (varE1.style.backgroundColor == varColor2 && varE2.style.backgroundColor == varColor2) {
document.getElementById('gcpod').style.backgroundColor = 'green';
} else {
document.getElementById('gcpod').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;
}
.buttonsmall {
background-color: #FF0000;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color: white;
}
.buttonsmall:hover {
background-color: green;
} <!DOCTYPE html>
<html>
<head>
</head>
<body >
<!-- Create extra space -->
<p><br><br></p>
<!-- Create extra space -->
<p><br></p>
<body>
<!-- Create extra space -->
<p><br><br></p>
<!-- Create extra space -->
<p><br></p>
<div id="GC">
<button id="gcpod" class="buttonsmall" style="height:20px;width:60px">
</div>
<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', 'b_echo_01')"/></td>
<td width="10%"></td>
</tr>
</table>
</div> <!-- Close Div Echo_O01_button -->
<!-- <p><br></p> -->
<div id="Echo_O02_button">
<table style="width:20%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<!--<col style="background-color:yellow"> -->
</colgroup>
<tr id="rowB">
<td width="20%"><input type="button" id = "b_echo_02" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O02')">
</td>
<td width="40%"><b>Echo555_O02</></td>
<td width="15%"></td>
<td id="celB" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowB" onclick="ChangeRowColor(this,'rowB','celB', 'b_echo_02')"/></td>
<td width="10%"></td>
</tr>
</table>
</div> <!-- Close Div Echo_O02_button -->
</body>
</html>