라디오 버튼에 따라 입력칸 보이기/숨기기

특정 라디오 버튼을 눌렀을 때, div값이 보이고 숨겨지는 것을 알아보겠습니다.

우선 저는 div값이 숨겨져 있다가, ‘기타’라는 라디오버튼을 누르면 div값이 나타나는 기능으로 하도록 하겠습니다.

 

---

 

결과화면입니다.

 

적용 전

적용 후

 

JSP

 

특정 버튼인 기타 부분의 ID를 다른 라디오 버튼 ID와 다르게 설정합니다.

그리고 DIV ID 값을 지정해줍니다.

 

 

<tr>
 
<th class="active" style="text-align:right">신청 경로</th>
 
<td class="form-inline">
 
<input type="radio" name="cs_channel" id="cs_channel" value="온라인 최초 신청" class="radio" /><span class="ml_10">온라인 최초 신청</span>&nbsp;
 
<input type="radio" name="cs_channel" id="cs_channel" value="방문" class="radio" /><span class="ml_10">방문</span>&nbsp;
 
<input type="radio" name="cs_channel" id="cs_channel" value="사후 관리" class="radio" /><span class="ml_10">사후 관리</span>&nbsp;
 
<input type="radio" name="cs_channel" id="cs_channel" value="유관기관 추천" class="radio" /><span class="ml_10">유관기관 추천</span>&nbsp;
 
<input type="radio" name="cs_channel" id="cs_channel" value="지인소개" class="radio" /><span class="ml_10">지인소개</span>&nbsp;
 
<input type="radio" name="cs_channel" id="cs_channel_etc" value="" class="radio" /><span class="ml_10">기타</span>&nbsp;
 
<br><br>
 
<div id="etc_view" style="display:none;">
 
<input type="text" id="cs_channel_etc_view" name="cs_channel"  class="form-control" style="width:200px" placeholder="기타 선택 시 입력해주세요." />
 
</div>
 
 
 
</td>
 
</tr>

 

 

JQUERY

 

라디오에서 ID값이 기타부분인 것을 클릭할 경우 체크값이 있으면

Display를 none으로 설정하고 아니면 display를 block으로 설정하여 보이지 않도록 설정합니다.

 

 

$(function (){
 
$('input[type="radio"][id="cs_channel_etc"]').on('click', function(){
  var chkValue = $('input[type=radio][id="cs_channel_etc"]:checked').val();
  if(chkValue){
             $('#etc_view').css('display','none');
  }else{
             $('#etc_view').css('display','block');
  }
 
});
 
});