Checkbox pojawiający się dopiero po zaznaczeniu pierwszego checkboxa

Witam ,
chciałbym zrobić checkbox, który pojawi się dopiero po zaznaczeniu pierwszego checkboxa.
Na stronie powinien pojawiać się checkbox I would like to attend the after-party
i jeżeli ktoś go onzaczy to pojawia się reszta. Jak to można zrobić ?
Pozdrawiam

<form ACTION="jspCheckBox.jsp">

<input type="checkbox" name="id"
value="I would like to attend the after-party"> I would like to attend the after-party<BR>
<input type="checkbox" name="id"
value="no special preferences"> no special preferences<BR>
<input type="checkbox" name="id"
value="vegan"> vegan<BR>
<input type="checkbox" name="id"
value="vegetarian"> vegetarian<BR>
<input type="checkbox" name="id"
value="food allergies"> food allergies<BR>
<input type="submit" value="Submit">

</form>
        
</body>

Dajesz sobie w CSS:

.hidden{
   visibility:hidden;
}

a następnie:

document.getElementById("dupa").className = 'hidden';

albo:

document.getElementById("dupa").className = '';

Albo bez JS sam CSS pozostałe ChceckBoxy w DIV taki przykład:
CSS:

#MyChBox[type=checkbox] + #MyChBoxChilds {
  display: none;
} 
#MyChBox[type=checkbox]:checked + #MyChBoxChilds {
  display: block;
}

HTML:

<input type="checkbox" id="MyChBox" name="firstchbox"> 
<div id="MyChBoxChilds" >
<input type="checkbox" id="childone" name="childone"> 
<input type="checkbox" id="childtwo" name="childtwo"> 
</div>