자바스크립트 input태그의 라디오버튼 제어하기

확인을 누르면 선택한 동물이 alert 창에 뜨도록 하기

고양이 강아지 돼지 고래

라디오버튼을 모두 name=”rb”로 정의하여 배열 생성

<form name="form1">
  <fieldset>
    <legend>
      확인을 누르면 선택한 동물이 alert 창에 뜨도록 하기
    </legend>
    <label>
      고양이
      <input type="radio" value="cat" name="rb">
    </label>
    <label>
      강아지
      <input type="radio" value="dog" name="rb">
    </label>
    <label>
      돼지
      <input type="radio" value="pig" name="rb">
    </label>
    <label>
      고래
      <input type="radio" value="whale" name="rb">
    </label>
  </fieldset>
  <input type="button" value="확인" name="check">
</form>

확인 버튼 클릭 시 체크한 라디오 버튼이 alert창에 뜨도록 코드 생성

<script>

        var rb = document.form1.rb;
        var check = document.form1.check;

        rb[0].checked = true;

        check.onclick = function() {

            for (var i=0; i<rb.length; i++) {
                if(rb[i].checked) {
                    alert(rb[i].value);
                }
            }
        }

</script>

1. 라디오 버튼에 체크를 하면 for문 안의 if문 조건은 true가 된다.
2. 조건이 true라면 클릭한 라디오 버튼의 value가 alert창에 뜬다.
3. 기본값으로 rb[0] 고양이 버튼에는 체크가 되어있도록 설정해놓았다.

💗 개발 공부하는 블로그입니다. 틀리거나 문제될게 있다면 코멘트 부탁드립니다. 👉👈