[JQuery] 라디오 버튼 선택에 따른 input 처리

라디오 버튼 선택에 따른 input 처리

jsp를 다루다 보면 라디오 버튼에 따라 input을 보이게 하거나 가려지게 하는 화면이 필요합니다.

주로 insert 나 update 를 하는 화면에 필요한데 아래 예시에 따라 진행해보시기 바랍니다.

                        <li>
                        // 시작 유형이라는 라벨을 생성
                            <label for="start_type" class="li_th">시작 유형</label>
                            <span class="li_td layer_radio_wrap">                        
                        
                        // start_type_radio를 class 로 갖고 value 를 "right_away" 로 갖는 "바로시작" radio button 생성
                        		<label>
                                  <input class="start_type_radio" id="start_right_away" type="radio" value="right_away" name="start_type" checked="checked">
                                  <i class="helper"></i>
                                  <span>바로시작</span>
                               </label> 
                        // start_type_radio를 class 로 갖고 value 를 "later" 로 갖는 "예약시작" radio button 생성
                               <label>
                                  <input class="start_type_radio" id="start_later" type="radio" value="later" name="start_type">
                                  <i class="helper"></i>
                                  <span>예약시작</span>
                               </label>                        
                            </span>
                        </li>

1. 먼저 vlaue 값을 'right_away'로 갖는 바로 시작 라디오 버튼과 'later'를 value 값으로 갖는 예약 시작 버튼을 생성했습니다.

                             <li id="task_date_setting" style="display:none">
                                <label for ="task_start_date" class="li_th">작업 시작일</label>
                                <span class="li_td">
                                    <input id ="task_start_date" type="date" name="taskStartDate" required="required"/>
                                </span>
                            </li> 

                        <li id="task_time_setting" style="display:none">
                            <label for ="task_start_time" class="li_th">작업 시작 시간</label>
                            <span class="li_td">
                                <input id ="task_start_time" type="time" name="taskStartTime" required="required"/>
                            </span>
                        </li>

2. type을 "date"와 "time"으로 갖는 input을 생성하고 처음 화면에선 가려두기 위해 style="display:none"을 사용합니다.

// 예약시작 라디오 버튼 클릭시 작업 시작일, 작업 시작 시간 보이게 하기

    $(document).ready(function(){
    			// type 이 radio 이고 class 가 start_type_radio 인 input 을 click 했을 경우
                $('input[type="radio"][class="start_type_radio"]').on('click',function(){
					
                    // startSetting 에 checked된 radio button의 value 값을 넣는다.
                    var startSetting = $('input[type=radio][class="start_type_radio"]:checked').val();
                   
                   // startSetting이 later인 경우 style display를 flex로 변경한다. 
                   if(startSetting == 'later'){
                        $('#task_date_setting').css('display','flex');
                        $('#task_time_setting').css('display','flex');
                   
                   // 그외의 경우 style display를 none 으로 변경한다.
                    }else{
                        $('#task_date_setting').css('display','none');
                        $('#task_time_setting').css('display','none');
                    }
                });
            });

3. 라디오 버튼 클릭 시 value 값이 var startSetting에 저장되며, 저장 값에 따라 display를 변경하여 input을 보여주거나 가려줄 수 있습니다.

 

4. 결과

See the Pen by Josh Won (@jeonghoonwon) on CodePen.

이상입니다.