테스트 사이트 - 개발 중인 베타 버전입니다

라디오버튼 체크시 숨겨놓은? 필드 나오게 하는 방법 채택완료

코딩천재 10년 전 조회 3,678

안녕하세요 다름이 아니구 이번엔 라디오버튼 질문입니다!

 

라디오 버튼이

 

1 2 3

 

이렇게 있는데

 

1을 클릭시에 4 5 6으로 하단에 새로운 필드를 쓸수 있게 나오고

2를 클릭시에 7 8 9, 3을 클릭시에 10 11 12 이렇게 나와서 글을 쓸 수 있게 만들어보고 싶습니다.

 

이런 유사한 형태의 스킨이나 사이트 좀 알려주시면 감사하겠습니다.

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
10년 전

간단하게 만들어 봤는데 원리는 같으니 잘 응용해 보세요 ㅎㅎ

</p><style>
   #div1{display:none;}
   input{border:1px solid #CCC;}
</style>

  <form>
  <input type="radio" name = "rad" id="rad1" class="c_rad">청년
  <input type="radio" name = "rad" id="rad2" class="c_rad">중년
  <input type="radio" name = "rad" id="rad3" class="c_rad">노년

  <div id="div1">
     <label for="inp">글쓴이</label>
     <input type="text" name="inp" id="inp" />
  </div>
  </form>

<script>
$(function(){
    $("input:radio[name=rad]").attr("checked", false);//초기 라디오버튼 모두 해제
    $("#rad1").click(function(){
        $("#div1").css("display","block");
    });

});
</script><p>
 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

코딩천재
10년 전
알려주신 소스를 사용해서 적용시켜보니 name=rad이고 id값이 rad1일때 div1이 나오고 id값이 rad2일때 div2 가 나오게 끔은 성공했습니다. 딱 제가 원하는 소스였습니다 감사합니다. 음 그런데 rad1 체크하고 div1이 나오는데 rad2를 클릭했을때 div1이 없어지지 않고 div1 밑에 div2가 나오는데 혹시 미체크일시 div1을 사라지게 할수는 없는건가요? 시간 되시면 답변 부탁드리겠습니다!! 정말 감사합니다.
코딩천재
10년 전
앜 위에 질문드린거 스스로 해결해보았습니다. 이제 구현하고 싶은데로 소스를 완성시키게 되었습니다. 도움주셔서 정말 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인