radio버튼클릭에 따라 하위태그 사라지게 하기

💡 핵심 요약 (TL;DR)

radio버튼클릭에 따라 하위태그 사라지게 하기의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. 정보를 제공받으시겠습까 radio버튼 아니요를 클릭하면 아래 소식을 어떻게받으시겠습니까는 아예 사라지게 하고싶다.

아래예시를 보자.
정보를 제공받으시겠습까 radio버튼 아니요를 클릭하면 아래 소식을 어떻게받으시겠습니까는 아예 사라지게 하고싶다.

아래는 html구조이다

<p><label for="acceptInfo">♣아이티윌부산이 제공하는 정보를 받으시겠습니까?</label></p>
<input type="radio" name="event" id="event-y" checked><label for="event-y">예, 받겠습니다</label><br>
<input type="radio" name="event" id="event-n"><label for="event-n">아니요, 받지않겠습니다.</label><br>
<p id="event-h">
<label for="howToGetInfo">♣정보나 이벤트 소식을 어떻게 받으시겠습니까?</label><br>
<input type="checkbox" name="howToGetInfo" value="email" checked>이메일
<input type="checkbox" name="howToGetInfo" value="text" > 문자
<input type="checkbox" name="howToGetInfo" value="katalk" checked> 카카오톡
<input type="checkbox" name="howToGetInfo" value="mail" > 우편
</p>

아래는 css코드이다

<style>
	#event-y:checked~#event-h {display: block;}
	#event-h {display: none;}
</style>

#TILHTML&CSSITWILL(JAVA)