'Radio'에 해당되는 글 1건

  1. 2009.11.03 JavaScript Radio...!
JavaScript2009. 11. 3. 20:50
JavaScript의 radio의 선택된 값 가지고 오기...!

radio의 속석을 먼저 생각해야 한다.
radio는 name에 지정된 변수명으로 배열에 저장된다고 보면된다.
name="sex"로 적어놨으니 sex[]배열에 저장된다.
코드를 보자.. 설명은 줄마다 주석으로...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>회원 가입</title>
<script type="text/javascript">

function checkIt(objFrm){                      //function에서 form을 변수로 받는다.
    //1. Data
    var arySex = objFrm.sex.length;           //objFrm을 파라미터로 받지 않는다면 document.FormName.ElementName.Method;로 쓸수있다. length는 sex의 배열의 길이를 리턴해준다.

    alert(arySex);                                     //배열의 길이를 alert창으로 출력.

    var sex;                                              //선택된 radio의 value값을 저장할 변수 선언.
    for(var indexI = 0;indexI < arySex; indexI++){                 //arySex배열의 길이만큼 반복문.
        if(objFrm.sex[indexI].checked){                       //반복문이 돌면서 checked Method로 선택된 radio의 값을 sex변수에 저장.
            sex = objFrm.sex[indexI].value;
        }
    }
    alert(sex);                                              //제대로 값이 들어왔는지 alert로 확인.
}

</script>
</head>

<body>

<form name="frmRegist" onsubmit="return checkIt(this)" method="post" action="" >

<table width="800" border="1">
    <tr>
        <td>Sex
        </td>
        <td>
            <input type="radio" id="sex" name="sex" value="M" checked="checked">Male
            <input type="radio" id="sex" name="sex" value="F" >Female
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="submit" value="Log On">
            <input type="reset" value="Reset">
           
        </td>
    </tr>
   
</table>
</form>
</body>
</html>

밑에 HTML소스는 설명 생략...!
radio는 배열로 넘어오고 또 체크 되었는지 안되었는지를 checked Method로 검사만 해주면 된다.
Posted by Z700zZz