라디오 버튼 구현

라디오 버튼은 사용자에게 목록을 제시하고 선택하는데 도움을 줍니다.

EditText등과 같이 서술형 입력을 받는 것이 아니라 입력받을 항목을 미리 정해놓고

그 안에서 사용자가 선택하는 방법으로 간편하게 많이 사용됩니다.

 

예를 들어 한국 내의 명소를 검색하는 상황에서 라디오 버튼을 통해 지명을 선택하게

유도하는 등의 방법으로 사용할 수 있습니다.

 

 

위 그림과 같이 지명으로 구성된 라디오 버튼을 구현하기 위해

먼저 HTML을 통해 라디오버튼을 구현하도록 합니다.

 

<table width="700" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC" style="margin-top:220px;" align="center">
        <td colspan="2" bgcolor="#FFFFFF" align="center">
                <label><input type="radio" name="rd" id="rdgr1" value="seoul">서울</label>
                <label><input type="radio" name="rd" id="rdgr2" value="yeongnam">영남</label>
                <label><input type="radio" name="rd" id="rdgr3" value="honam">호남</label>
                <label><input type="radio" name="rd" id="rdgr4" value="daejeon">대전</label>
                <label><input type="radio" name="rd" id="rdgr5" value="busan">부산</label>
                <label><input type="radio" name="rd" id="rdgr6" value="daegu">대구</label>
                <label><input type="radio" name="rd" id="rdgr7" value="pohang">포항</label>
                <label><input type="radio" name="rd" id="rdgr8" value="gangbuk">강북</label>
                <label><input type="radio" name="rd" id="rdgr9" value="gwangju">광주</label>
                <label><input type="radio" name="rd" id="rdgr10" value="gangwon">강원</label>
        </td>
</table>

 

여기까지 구현하면 라디오버튼이 정상적으로 출력이 되는 것을 확인할 수 있습니다.

위 코드에서는 구현되었지만 주의해야할 점 하나는 name부분을 동일하게 해 주어야 나중에

중복 체크되는 것을 막고 하나만 클릭되게 구현할 수 있습니다.

 

라디오 버튼을 생성한 이유는 어떠한 버튼이 선택되었는지 확인하기 위해서인데

버튼을 하나 생성하여 버튼클릭시에 선택된 라디오 버튼이 무엇인지 확인하는 방법을 알아보겠습니다.

 

<table width="700" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC" style="margin-top:220px;" align="center">
        <td colspan="2" bgcolor="#FFFFFF" align="center">
                <label><input type="radio" name="rd" id="rdgr1" value="seoul">서울</label>
                <label><input type="radio" name="rd" id="rdgr2" value="yeongnam">영남</label>
                <label><input type="radio" name="rd" id="rdgr3" value="honam">호남</label>
                <label><input type="radio" name="rd" id="rdgr4" value="daejeon">대전</label>
                <label><input type="radio" name="rd" id="rdgr5" value="busan">부산</label>
                <label><input type="radio" name="rd" id="rdgr6" value="daegu">대구</label>
                <label><input type="radio" name="rd" id="rdgr7" value="pohang">포항</label>
                <label><input type="radio" name="rd" id="rdgr8" value="gangbuk">강북</label>
                <label><input type="radio" name="rd" id="rdgr9" value="gwangju">광주</label>
                <label><input type="radio" name="rd" id="rdgr10" value="gangwon">강원</label>
                <input type="button" name="allserch_button" id="allserch_button" value="지역 조회" onclick="Serch()" ></input>
        </td>
</table>

 

맨 아래쪽에 지역조회라고 버튼을 하나 생성하고 onclick 이벤트로 search() 함수를 설정했습니다.

search() 함수는 script에서 정의하도록 하겠습니다.

HTML 위쪽에 search() 함수를 구현하도록 합니다.

 

<script>
function Serch(){
        var area_data;
        if(document.getElementById("rdgr1").checked){
                area_data = "서울";
        }else if(document.getElementById("rdgr2").checked){
                area_data = "영남";
        }else if(document.getElementById("rdgr3").checked){
                area_data = "호남";
        }else if(document.getElementById("rdgr4").checked){
                area_data = "대전";
        }else if(document.getElementById("rdgr5").checked){
                area_data = "부산";
        }else if(document.getElementById("rdgr6").checked){
                area_data = "대구";
        }else if(document.getElementById("rdgr7").checked){
                area_data = "포항";
        }else if(document.getElementById("rdgr8").checked){
                area_data = "강북";
        }else if(document.getElementById("rdgr9").checked){
                area_data = "광주";
        }else if(document.getElementById("rdgr10").checked){
                area_data = "강원";
        }else{
                alert("지역을 선택하세요");
        }
        if(area_data.length!=0){
                location.replace("serch_list.php?id="+area_data);
        }
}
</script>

 

해당 함수가 호출되면 라디오버튼이 체크된 것을 확인 한 뒤에

location.replace를 통해 다른페이지로 해당 값을 전송하여 조회된 값을 확인합니다.

 

이렇게 라디오버튼의 개수가 작으면 상관없지만 만약에 항목이 많아지면

위 코드의 방법으로는 너무 불편함이 많습니다.

자바 스크립트에서는 checked를 확인할 수 있는 함수 형태가 많이 있으므로

버튼의 항목이 많다면 함축적인 방법을 찾아 사용하시는게 좋습니다.