Change Background Color with Checkbox on an Order Form

[dradmo]

I have a custom order form that we are working on formatting

 

https://secureordercenter.org/turbotrafficsystem/swmorder.php

 

In the "upgrade and save" box - it switches the order form ID's and changes the price of the product when they upgrade

<input name="Checkbox0" value="23464" onclick="monitorCheck();" id="switchForm" type="checkbox">

 

In addition to the checkbox which upgrades their order, I also want the checkbox click to change the background color of

<div id="offer">

from #FFC0CD  to #7DFF9C

 

Then when they unclick the checkbox - it returns the background color to #FFC0CD

 

While still maintaining the order form upgrade functionality

 

Is there another onclick function that I can add?

 

Thanks for the help!

 

 

 

 

 

[dradmo]

One more thing I forgot in the first post - the current checkbox is referencing this javascript

 

<script type="text/javascript">

function monitorCheck(){
var tablecol1 = '<table><tr id="start" style="width:210px"><td >Item</td><td>Price</td></tr>'
var checkout1 ='<tr><td id="cleft">Starting With Marketing</td><td id="cright"> $37.00</td></tr><tr><td id="cleft"><b>TOTAL</b></td><td id="cright"><b>$37.00</b></td></tr></table>';
    var checkout2 = '<tr><td id="cleft">Starting With Marketing</td><td id="cright"> $37.00</td></tr><tr><td id="cleft">Email List Masterclass</td><td id="cright">$47.00</td></tr><tr><td id="cleft"><b>TOTAL</b></td><td id="cright"><b>$84.00</b></td></tr></table>';

    
            	 			
    if(document.getElementById('switchForm').checked){
    	document.getElementById('checkout').innerHTML = tablecol1 + checkout2;
	document.orderForm.infusion_xid.value = 'd48a7c7d391ea733dfdf57a58c8a6b1b';
	document.orderForm.infusion_name.value = 'Starting With Marketing + Email List Masterclass';
    } else {
    	document.getElementById('checkout').innerHTML = tablecol1 + checkout1;
	document.orderForm.infusion_xid.value = '33d935180a814d09caf766791390137e';
	document.orderForm.infusion_name.value = 'Starting With Marketing';
    }
}
</script>

<script type="text/javascript">
function agreeCheck() {
  if (document.orderForm.agree.checked == true) {
       return true;   
  } else {
      alert("You must first agree to the terms.");
      return false;
  }
}
</script>