How to change elements opacity based on if checkbox is or is not checked with CSS only?

I know that I could use .is(':checked') with jQuery, but is there a CSS way? I kind of would like to make this #navbar-checkbox:checked #mobile-nav { display: block; } bit of code work, as I know I could do something similar with :hover, but is there a way to do it with :checked ?

So the full markup:

CSS

#mobile-nav { display: none; }
#navbar-checkbox:checked #mobile-nav { display: block; }

That's really all I want.