Set div background color to inherit when checkbox is unchecked

I'm currently using radio for my checkbox; so within group only one checkbox can be checked.

var name = $("input:checkbox[name='fooby[2][]']:checked").prop('id')
var unique_id = $(this).parent().find('label[for="' + name + '"]').find('div.eachText').attr('id')
var2 = $("input:checkbox[name='fooby[2][]']:checked")
if ($(var2).is(":checked")) {
  $("input:checkbox[name='fooby[2][]']:checked").map(function() {
    document.getElementById(unique_id).style.backgroundColor = 'grey';
  })

} else {
  document.getElementById(unique_id).style.backgroundColor = 'inherit'
}

<script src="http://ift.tt/1oMJErh"></script>
<input type="checkbox" class="radio" value="dTLA" id="group4" name="fooby[2][]" />
<label for="group4">
    <div  id="test1" class="eachText ">
        dTLA
        <div class="l_desc ">
            555 West 5th street, 34th floor<br> 811 W 7th St
        </div>

    </div>
</label>
<input type="checkbox " class="radio " value="Long Beach " id="group5 " name="fooby[2][] " />
<label for="group5 " class="eachText1">
<div id="test2" class="eachText">
  Long Beach
  <div class="l_desc">
    100 W Broadway
  </div>
</div>
</label>

My goal is to be able to set checkbox to grey when checked and to inherit when unchecked.