input radio 버튼 클릭하면 하단 내용 보이기 / 숨기기

input radio 버튼이 두 개 있을 경우 radio 버튼 하나를 클릭하면 해당 radio 버튼 내용이 display:block 되고 다른 radio 버튼 내용은 display:none 되는 방법을 연습해 보았다.

 

1. 소스 

[HTML]

<div class="wrap">
    <div class="search_box">
        <p>아이디 검색 방법 선택하기!</p>
        <div class="check">
            <ul>
                <li>
                    <div>
                        <input type="radio" id="chk1" name="chk" value="1" style="margin-right: 5px; margin-bottom: 3px;" checked />
                        <label for="chk1">휴대폰으로 아이디 수신</label>
                    </div>
                    <div class="sear check01">
                       <ul class="clear">
                           <li class="method">휴대폰</li>
                           <li>
                                <input type="text" id="call" maxlength="11" style="" />
                           </li>
                       </ul> 
                    </div>
                </li>
                <li>
                    <div>
                        <input type="radio" id="chk2" name="chk" value="2" style="margin-right: 5px; margin-bottom: 3px;" />
                        <label for="chk2">이메일로 아이디 수신</label>
                    </div>
                    <div class="sear check02" style="display: none;">
                       <ul class="clear">
                           <li class="method">이메일</li>
                           <li>
                               <input type="text" id="email" maxlength="100" style="" />
                           </li>
                       </ul> 
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

 

[CSS]

<style>
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
img {border: 0; outline: 0}
a {text-decoration: none; color:#333;}
button, fieldset, input{border: 0; outline: 0; background: none;}
button {cursor: pointer;}
table {border-collapse: collapse; border-spacing: 0}
caption, legend {font-size: 0; color:transparent; text-indent: -9999px; overflow: hidden;}
body,html{height: 100%;}
.clear:after{content: ""; display: block; clear: both;}


/* radio 체크 박스*/
.wrap{width: 100%}
.search_box{width: 550px; padding: 22px 16px 30px; margin: 0 auto}
.search_box > p{font-size: 17px; margin-bottom: 20px; font-weight: bold;}
.search_box .check{border: 1px solid #d7d7d7; padding: 0 30px; margin-top: 1px;border-radius: 5px; background-color:#f6f6f6}
.search_box .check > ul > li{padding: 20px 0; font-size: 16px;}
.search_box .check > ul > li:first-child{border-bottom: 1px solid #d7d7d7;}
.search_box .check input{border: 1px solid #cacaca; padding: 5px; border-radius: 3px; background-color:#fff}
.search_box .check div.sear{margin-top: 20px; padding: 0 26px; line-height: 2px;}
.search_box .check div.sear > ul > li{float: left;}
.search_box .check div.sear > ul > li.method{margin-right: 20px; height: 27px; line-height: 27px;}
</style>

 

[JS]

<script>
/*휴대폰, 이메일 input:radio 선택*/
  $(document).ready(function(){
      // 라디오버튼 클릭시 이벤트 발생
      $("input:radio[name=chk]").click(function(){
          if($("input[name=chk]:checked").val() == "1"){
              // radio 버튼의 value 값이 1이라면 
              $(".check01").css("display","block");
              $(".check02").css("display","none");
              
          }else if($("input[name=chk]:checked").val() == "2"){
              // radio 버튼의 value 값이 2이라면 
              $(".check01").css("display","none");
              $(".check02").css("display","block");
          }
      }); 
  });
</script>

 

2. 결과 화면 

See the Pen Untitled by H__jung (@honghongbyul) on CodePen.

 

3. 제이쿼리 문법 정리 

• .val() : input, select 등의 form의 value값을 가져온다.