JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<div class="container">
   <input value="1" type="checkbox" name="salgsvilkar" id="checkbox2"  style="float:left;" checked />
   <label for="checkbox2" class="akslabel">Salgs og leveringsvilkår er lest og akseptert</label>
</div>
<div class="container">
   <input value="1" type="checkbox" name="salgsvilkar" id="checkbox3"  style="float:left;" />
   <label for="checkbox3" class="akslabel">Salgs og leveringsvilkår er lest og akseptert</label>
</div>
<div class="container">
   <input value="1" type="checkbox" name="salgsvilkar" id="checkbox4"  style="float:left;" checked />
   <label for="checkbox4" class="akslabel">Salgs og leveringsvilkår er lest og akseptert</label>
</div>
<div class="container">
   <input value="1" type="checkbox" name="salgsvilkar" id="checkbox5"  style="float:left;" checked />
   <label for="checkbox5" class="akslabel">Salgs og leveringsvilkår er lest og akseptert</label>
</div>

CSS

.container
{
    border: 1px solid #000;
    padding: 20px;
    width: 300px;
}

.container.highlight
{
    border: 1px solid #f00;
    background-color: #0f0;
    padding: 20px;
    width: 300px;
}

JavaScript

$(function() {
  $(".container :checkbox").change(function(){
    $(this).closest(".container").toggleClass('highlight', this.checked);
  }).change();
});