mardi 27 septembre 2016

Toggle background color of checkbox div or label

I can get the follow code to work like I want it to with one exception. When I select the checkbox the background color of the div changes from #fff to #ffe600 as it should. The problem I'm running into is when the form is submitted and page is refreshed the background color reverts back to #fff. I would like for the back ground color to stay #ffe600 when the page is refreshed after the form has been submitted. The checkbox remains checked after page refresh but the div background color reverts back to #fff. Does anyone know if it's possible to maintain the div background color #ffe600 when the page is refreshed. This has really gotten be stumped.

function myFunction(x, _this) {
  if (_this.checked) {
    x.style.backgroundColor = '#ffe600';
  } else  {
    x.style.backgroundColor = '#fff';
  }
}
#product1 {
  background-color: #fff;
  padding: 3px 5px 3px 7px;
  margin-top: 6px;
}
<script src="http://ift.tt/1oMJErh"></script>
<div id="product1">
  <label class="chk">
    <input type="checkbox" onChange="myFunction(product1, this)" name="select_product" value="Y" />Label goes here.</label>
</div>

Thanks!




Aucun commentaire:

Enregistrer un commentaire