复选框更改颜色按钮后

时间：2019-05-08 08:35:10

标签： javascript html

选中复选标记后，背景色和按钮的颜色应更改。此时背景颜色和按钮颜色会发生变化，但是当我取消选中复选框时，背景颜色会变回原来的颜色，但是按钮的颜色保持不变。每次都应该变回去

有一个Javascript可以更改背景颜色，但是对于按钮颜色则不起作用。 

 //  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) {
       var varrow = document.getElementById(row);
       var varcel = document.getElementById(cel);
       var varColor = "#E3CEF6";
       var varColor2 = "Yellow";
       if (chkrow.checked == true) {
           varColor = "Grey";
    	   varColor2="Grey";	   
       }
       varrow.style.backgroundColor = varColor;
       varcel.style.backgroundColor = varColor2;
       document.getElementById("b_echo_01").style.backgroundColor='green';
    }
 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;
    }
    
    <html>
     <body  >
      <!-- Create extra space -->
    <p><br><br></p>

    <p><br></p>
    
       <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 --> 
       <!--  <p><br></p>	-->
     
      </body>
    </html>

现在，当复选框处于选中状态时按钮颜色会更改，但是如果未选中此复选框则不会更改

5 个答案:

答案 0 :(得分：0)

像这样在您的JS上添加一个else条件... 

   if (chkrow.checked == true) {
       varColor = "Grey";
       varColor2="Grey"; 
       document.getElementById("b_echo_01").style.backgroundColor='green';      
   }else{
       document.getElementById("b_echo_01").style.backgroundColor='red';
   }

答案 1 :(得分：0)

   function ChangeRowColor(chkrow,row,cel) {
    var varrow = document.getElementById(row);
    var varcel = document.getElementById(cel);
    var varColor = "#E3CEF6";
    var varColor2 = "Yellow";
    if (chkrow.checked == true) {
       varColor = "Grey";
       varColor2="Grey";       
    }
    varrow.style.backgroundColor = varColor;
    varcel.style.backgroundColor = varColor2;
    if(event.target.checked){
      document.getElementById("b_echo_01").style.backgroundColor='green';
    }
    else{
     document.getElementById("b_echo_01").style.backgroundColor='#FF0000';
    }

}

答案 2 :(得分：0)

$(document).ready(function () {
  $('input[type="checkbox"]').click(function () {
    if ($(this).prop("checked") == true) {
      varColor = "Grey";
      varColor2 = "Grey";
      document.getElementById("b_echo_01").style.backgroundColor = 'green';
    } else if ($(this).prop("checked") == false) {
      document.getElementById("b_echo_01").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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><br><br></p>
<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" >      
      </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" /></td>
      <td  width="10%"></td>
    </tr>
  </table>
</div>
<!-- Close Div Echo_O01_button --> 
<!--  <p><br></p>    -->

答案 3 :(得分：0)

问题是您在每次单击选择框时将按钮的背景色更改为绿色。

要解决此问题，您需要做的是使用else语句扩展if语句，以检查是否选中了selectbox。

请参见以下示例：

if(chkrow.checked){
    varColor = 'Grey';
    varColor2 = 'Grey';
    document.getElementById("b_echo_01").style.backgroundColor='green';
}else{ 
    document.getElementById("b_echo_01").style.backgroundColor='red';
}

答案 4 :(得分：0)

添加varColor3 = 'red'并根据checked更改值为row and cell时的值

//  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) {
       var varrow = document.getElementById(row);
       var varcel = document.getElementById(cel);
       var varColor = "#E3CEF6";
       var varColor2 = "Yellow";
       var varColor3 = "red";
       if (chkrow.checked == true) {
           varColor = "Grey";
    	     varColor2 = "Grey";
           varColor3 = "green";
       }
       varrow.style.backgroundColor = varColor;
       varcel.style.backgroundColor = varColor2;
       document.getElementById("b_echo_01").style.backgroundColor = varColor3;
    }
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;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<html>
     <body  >
      <!-- Create extra space -->
    <p><br><br></p>

    <p><br></p>
    
       <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 --> 
       <!--  <p><br></p>	-->
     
      </body>
    </html>

相关问题
最新问题