티스토리 뷰

Programming/JAVASCRIPT

자바스크립트 라디오버튼 값 가져오기

Beat. 2016. 9. 7. 11:53

안녕하세요 오늘은 자바스크립트 라디오버튼 값 가져오기에 대해 알아보겠습니다.


라디오버튼을 평상시에 많이 쓰이는 태그인데요.

라디오버튼을 통해 남녀 구분을 하는 방법을 알아보겠습니다.

<body>안에 복사붙여넣기 하시고 바로실행 해주세요.

<script type="text/javascript">
    function radio_chk() {
        //라디오 버튼 Name 가져오기
        var radio_btn = document.getElementsByName("radio_btn");
 
        //라디오 버튼이 체크되었나 확인하기 위한 변수
        var radio_btn_check = 0;
        for(var i = 0; i<radio_btn.length; i++){
            //만약 라디오 버튼이 체크가 되어있다면 true
            if(radio_btn[i].checked==true){
                //라디오 버튼 값
                alert(radio_btn[i].value);
                //라디오 버튼이 체크되면 radio_btn_check를 1로 만들어준다.
                radio_btn_check++;
            }
        }
        
        if(radio_btn_check==0){
            alert("라디오 버튼을 선택해주세요");
            return;
        }
    }
</script>
<!-- 라디오 버튼 name이 같아야 중복체크가 안됩니다. -->
<input type="radio" name="radio_btn" value="man">남자<br/>
<input type="radio" name="radio_btn" value="woman">여자<br/>
 
<input type="button" value="라디오 버튼 선택" onclick="radio_chk();"/>

<body>안에 복사붙여넣기 하시고 바로실행 해주세요.


자바스크립트에서 라디오버튼 값 가져오는 방법은 쉬운데요.


for문을 이용해서 라디오 버튼이 체크 되어 있는지를 확인 후 값을 출력해 주면 됩니다.

라디오버튼은 많이 사용하는 태그 중 하나니까 한번 연습해보세요~

감사합니다.



'Programming > JAVASCRIPT' 카테고리의 다른 글

javascript 자바스크립트 시간 계산하기 (시,분 더하기 빼기)  (0) 2022.04.11
javascript 자바스크립트 날짜 계산하기 (년,월,일 더하기 빼기)  (0) 2022.04.11
자바스크립트 강제 클릭 이벤트  (0) 2016.09.05
자바스크립트 숨기기 보이기  (0) 2016.09.05
자바스크립트 테이블 행 추가 삭제 하기  (0) 2016.09.03
공유하기 링크
댓글