Change Label Background Color When Checkbox Checked - html

Question

I need help about this code please, how can i make the whole label's background color change when i check the checkbox ?
I want the whole td or change it's background when the checkbox checked
I think I can do it by using css only
https://codepen.io/Haitham1000/pen/ZEWPMeY
<table class="choices">
<tr>
<td>
<div class="checkbox">
<label><input type="checkbox" value="">All categories</label>
</div>
</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="">1</label>
</div>
</td>
<td>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>2</label>
</div>
</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="">3</label>
</div>
</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="">4</label>
</div>
</td>
</tr>
</table>

Answer 1

It's simple!
Put your labels after the Input:
<input type="checkbox" value=""><label>All categories</label>
Add this css to your code:
input:checked ~ label {
background-color: blue;
}

Answer 2

That would require a parent selector, which doesn't exist for CSS. You however do siblings that come after the checkbox. This means you could have a background element that stretches the entire width and height and is behind all the other elements change color. See my snippet
input:checked ~ .background {
background-color: blue;
}
.background {
position: fixed;
z-index: -1;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background-color: grey;
}
<input type="checkbox">
<div class="background">