안녕하세요~ ITSkeleton입니다
HTML에서 자주 사용하는 Radio버튼
만드는 방법부터 javascript로 정보값을 받아오는 것까지 해보도록 하겠습니다.
라디오 버튼을 만드는 방법은 간단합니다
<input type ="radio" name = "check_radio" checked ="checked" value = "1" onclick = "radioClick()"/>
1번버튼
<input type ="radio" name = "check_radio" value = "2" onclick = "radioClick()"/>
2번버튼
<input type ="radio" name = "check_radio" value = "3" onclick = "radioClick()"/>
3번버튼
<input type ="radio" name = "check_radio" value = "4" onclick = "radioClick()"/>
4번버튼
<input type ="radio" name = "check_radio" value = "5" onclick = "radioClick()"/>
5번버튼
<input type ="radio" name = "check_radio" value = "6" onclick = "radioClick()"/>
6번버튼
이렇게 만들면 6개의 라디오 박스가 생성 됩니다.
각 옵션에 대하여 간단하게 설명해드리자면
type : input의 타입을 설정합니다 버튼이나 라디오버튼, 체크박스등 input으로 만들수있는 형식을 정해줍니다
name : 현재 라디오 버튼의 이름을 정해줍니다. 같은 이름으로 만들어진 라디오 버튼은 하나의 그룹화가 되어서 여러개중 하나를 선택하는 방식이 됩니다.
checked : 해당 라디오버튼에 체크표시를 해줍니다. 디폴트 선택을 표현할때 사용합니다.
value : 버튼의 정보값을 나타냅니다.
onclick : 라디오 버튼을 클릭할때 호출되는 함수입니다.
이제 javascript를 설명해 드리겠습니다.
제가 짜는 방식은 라디오 버튼을 클릭할때마다 함수를 호출하도록 짜여졌습니다.
<script type="text/javascript">
function radioClick() {
var checkvalue = $('input:radio[name="check_radio"]:checked').val();
switch (checkvalue ) {
case 1:
alert("check 1");
break;
case 2:
alert("check 1");
break;
case 3:
alert("check 1");
break;
case 4:
alert("check 1");
break;
case 5:
alert("check 1");
break;
case 6:
alert("check 1");
break;
}
}
</script>
간단하게 짠다면 이렇게 표현할수 있겠네요
1번버튼을 누르면 팝업으로 check 1 이라는 글자가 뜰것이고
2번버튼을 누르면 팝업으로 check 2 라는 글자가 뜰것입니다.
백문이불여일견 이라고 했죠 직접 한번 짜보시면서 익혀보세요~