[JavaScript] change를 활용하여 검색형식 변경

<div>
    <input type="radio" id="main" name="searchRadio" value="0" checked>
    <label for="main">일반검색</label>
    <input type="radio" id="detail" name="searchRadio" value="1" >
    <label for="detail">기간별 검색</label>			
</div>
<div class="searchBar" style="padding-right:10px">
<div>
    <select class="form-control form-control-sm" id="searchBasic" name="searchBasic">
        <option value="S" selected>선택</option>
        <option value="N">직원명</option>
        <option value="C">사원</option>
        <option value="D">상태</option>
    </select>
    <select class="form-control form-control-sm" id="searchDetail" name="searchDetail" style="display:none;">
        <option value="S" selected>선택</option>
        <option value="in">출근</option>
        <option value="out">퇴근</option>
        <option value="early">조퇴</option>
        <option value="no">결근</option>
    </select>
</div>
    <div id="searchWord">
   		<input type="text" class="form-control form-control-sm" name="keyword" id="keyword" value="${cri.keyword }"> 
    </div>
    <div id="dateType" style="display:none;">
        <input type="date" id="dateFrom" name="from" >
        ~ <input type="date" id="dateTo" name="to">
    </div>
    <div>
    		<button class="btn btn-sm btn-black" name="btnSearch" id="btnSearch">검색</button>
    </div>
</div>

확인

• display:none

//change를 활용하여 radio에 맞춰서 형식 변경
$("input[name='searchRadio']:radio").change(function(){

    var searchType = this.value;

    //검색 타입에 따라서 발생하는 검색창이 달라지게 함
    if(searchType == 0){
        $("#searchDetail").hide();
        $("#dateType").hide();

        $("#searchBasic").show();	
        $("#searchWord").show();	
    }else if (searchType == 1){
        $("#searchBasic").hide();
        $("#searchWord").hide();

        $("#searchDetail").show();
        $("#dateType").show();
    }//if end

});//change() end

확인

• .hide() 과 .show()