http://quirksmode.org/css/selectors/mobile.html#t60
:checked
apparently doesn't work in any version of Android. I'm not sure why so many webpages report that it should work (apparently from 2.1 up), but this is false.
The nice thing about QuirksMode is that every feature is actually tested in a real browser before they post it on the web.
JavaScript appears to be your best solution. I would even recommend javascript because if a user checks the "more" box, then selects some of the extra options, and then unchecks the "more" box... the extra selections will still be "checked" and will get submitted if a user hits a "submit" button. You will have to un-check those boxes every time the "more" box is un-checked. The only way to do this is with javascript.
UPDATE: QuirksMode has written a flawed test for the :checked
selector:
:checked {
display: inline-block;
width: 3em;
}
You will notice that on Android the width never changes... but this is due to the fact that Android does not apply a width to checkboxes and radios (while desktop browsers do).
The following does work, even in my Android 2.3:
:checked {
display: inline-block;
margin: 3em;
}
So, as stated in other comments, the problem is with the combination of the checked selector and the adjacent sibling selector:
:checked + .test { /* does not work on android :( */ }
:checked ~ .test { /* does not work on android :( */ }