After checkbox change color button

Question

After a checkmark is checked the background color and color of button should change. the background color and the button color changes at the moment, but when I uncheck the checkbox the background color changes back, but the color of the button stays the same. It should change back and for every time

have a javascript to change background color, but for button color this does not work.

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

now button color change when checkbox is checked but does not change back if checkbox is unchecked

Please, add a fiddle or snippet so we can test your code. – Jorge Fuentes González May 08 '19 at 08:37 — Jorge Fuentes González, May 08 '19 at 08:37

score 0 · Answer 1 · answered May 08 '19 at 08:41

0

Just add a else condition on your JS like this...

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

answered May 08 '19 at 08:41

Benjamin Garcia

1
2

Here is the supporting jsfiddle https://jsfiddle.net/k5cptqxw/ – Alaksandar Jesus Gene May 08 '19 at 08:44

score 0 · Answer 2 · answered May 08 '19 at 08:42

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

}

score 0 · Answer 3 · answered May 08 '19 at 08:44

$(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>    -->

StefanN · Answer 4 · 2019-05-08T08:54:39.823

The problem is that you change the background color of the button to green on each click/select on the selectbox.

What you need to do in order to solve this issue is to extend your if-statement with an else statement to check if the selectbox is checked or not.

See the following example:

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

score 0 · Answer 5 · answered May 08 '19 at 08:59

Add varColor3 = 'red' and change value when it is checked as per 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>

After checkbox change color button

5 Answers5