CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
Biplov
Biplov

Reputation: 1142

Set div background color to inherit when checkbox is unchecked

I currently have checkboxes in groups; I want to be able to set color of unchecked checkboxes when a checkbox is 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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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.

Upvotes: 0

Views: 359

Answers (1)

epascarello
epascarello

Reputation: 207501

No need for JavaScript to set the color with that markup. Just use CSS checked and sibling selector

input[type="checkbox"]:checked + label > div {
   background-color: red;
}
<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>

Upvotes: 1

Related Questions