JS - checkbox, radio 다루기

input='text' 요소와 같은 입력 상자는 접근하는 방식이 그렇게 어렵지 않지만 체크 박스나 라디오 버튼, 파일 업로드와 같은 특별한 요소에 접근하기에 다소 어려울 수 있습니다. 체크박스나 라디오 버튼에 접근하는 방법은 다음과 같습니다.

document.폼이름.checkbox이름.속성(or 메서드)

document.폼이름.elements[인덱스].속성(or 메서드)

속 성	설 명
defaultChecked	체크박스(라디오 버튼)의 기본 값 설정 true | false 중 하나 true 이면 선택한 상태가 됨
checked	체크박스(라디오 버튼)을 체크한 상태인지 체크. 선택한 상태이면 true, 아니면 false
name	체크박스(라디오 버튼) name 의 속성 값
type	<input> type 의 속성 값
value	체크박스(라디오 버튼) value 의 속성 값
elements	<checkbox> | <radio> 의 인덱스 번호
length	속성 혹은 속성 값의 문자열 길이 Ex.) document.frm.job.value.length

체크박스의 값 취득

체크박스에 대한 예제입니다.

<form name="frm" method="post" action="#">
  <!-- 전체 선택을 클릭하면 모든 체크박스가 선택됩니다. -->
  <a href="#" onclick="checkAll()">전체 선택</a><br/><br/>
  
  익스플로어 <input type="checkbox" name="box1" value=""><br/>
  <!-- 파이어폭스를 선택하면 이벤트가 발생합니다. -->
  파이어폭스 <input type="checkbox" name="box2"
                        value="" onclick="check()"><br/>
  크롬 <input type="checkbox" name="box3" value=""><br/>
  오페라 <input type="checkbox" name="box4" value=""><br/>
  사파리 <input type="checkbox" name="box5" value=""><br/>

  <input type="submit" value="전송">
</form>

<script>
// 익스플로어를 기본 값으로 설정합니다.
document.frm.box1.defaultChecked = true;

// 파이어폭스를 선택하면 이벤트가 발생합니다.
function check() {
  if(document.frm.box2.checked == true){
    alert("파이어폭스를 선택하였습니다.");
  }else{
    alert("선택을 취소하였습니다.");
  }
}

// 전체 선택
function checkAll() {
  var chk_len = document.frm.length;
  for(var i = 0; i < chk_len; i++) {
    // 체크박스라면 선택...
    if(document.frm.elements[i].type == "checkbox") {
      document.frm.elements[i].click();
    }
  }
}
</script>

이름이 동일한 체크박스가 여러 개가 있고, 선택한 값들만 콘솔에 출력하는 예제입니다. 전송버튼을 클릭하면 이벤트가 발생하면서 콘솔에 출력합니다.

<form>
 <input type="checkbox" name="size" value="x-large" checked> XX 사이즈
 <input type="checkbox" name="size" value="large"> X 사이즈
 <input type="checkbox" name="size" value="medium" checked> M 사이즈
 <input type="checkbox" name="size" value="small"> X 사이즈

 <input type="button" id="submit" value="전송">
</form>

<script>
var btn = document.getElementById("submit");

btn.addEventListener("click", function(){
  var items = [];

  var chkLen = document.getElementsByName("size");

  for(var i = 0; i < chkLen.length; i++){
    if(chkLen[i].checked){
      items.push(chkLen[i].value);
    }
  }
 console.log(items);
 /*
  결과:
    ["x-large", "medium"]
*/
});
</script>

라디오 버튼의 값 취득

라디오 버튼에 대한  예제입니다.

<form name="frm" method="post" action="#">
  익스플로어 <input type="radio" name="box" value="1"><br/>
  파이어폭스 <input type="radio" name="box"
                     value="2" onclick="check()"><br/>
  크롬 <input type="radio" name="box" value="3"><br/>
  오페라 <input type="radio" name="box" value="4"><br/>
  사파리 <input type="radio" name="box" value="5"><br/>

  <input type="submit" value="전송" onclick="send()">
</form>

<script>
// 익스플로어를 기본 값으로 설정.
document.frm.box[0].defaultChecked = true;

// 파이어폭스를 선택하면 이벤트가 발생
function check() {
  if(document.frm.box[1].checked == true){
    alert("파이어폭스를 선택하였습니다.");
  }
}

// 전송 버튼을 눌렀을 때 체크한 값을 대화상자로 알려줌.
function send() {
  var radio_len = document.frm.box.length;
    for(var i = 0; i < radio_len; i++) {
      // 라디오 버튼이고, 선택한 상태라면 
      // 선택한 필드의 값을 대화상자로 알려줘요.
      if(document.frm.box[i].type == "radio") {
        if(document.frm.box[i].checked == true) {
          alert( document.frm.box[i].value + " 를 선택하였습니다.");
        }
      }
  }
}
</script>