[자바스크립트] getElementsByName 사용하여 체크박스 checked 구하기

document.getElementsByName(이름) 은 object 의 name 을 통해 인식한다.

id나 name을 이용해서 value 값을 가져오는 건데, 차이점이라면 getElementById(아이디)로 가져오면 단일값을 가져오고 getElementsByName(이름)은 해당 이름으로 된 객체를 모두 배열로 받아올 수 있다는 점이다.

ID를 가져오는 함수인 getElementById 와 다르게, name은 중복될 수 있는 요소이기 때문에 Element 에 s가 붙어 복수형이 된다. getElementsByName 을 쓸때에는 첫글자를 대문자로 쓰면 안된다.

비록 객체가 한개일지라도 배열로 값을 받아야 받을 수 있다. 즉,

    var obj = document.getElementsByName("objectName");

    alert(obj[0].value);

 

<SCRIPT LANGUAGE="JavaScript">
<!--
function fchk() {
    var chk_obj = document.getElementsByName("box_chk");
    var chk_leng = chk_obj.length;
    var checked = 0; //체크된 개수 파악을 위한 초기변수
    for (i=0; i < chk_leng; i++) {
        if (chk_obj[i].checked == true) {
            checked += 1;

              alert(chk_obj[i].value);    // 선택된 순서대로 값을 출력
        }
    }
    if (checked == 0 ) {
        alert("선택된 정보가 없습니다");
        return;
    } else {
        alert(checked + "개 선택");
        return;
    }
}
//-->
</SCRIPT>

<form name="bbssearch" method="post" action="" onsubmit="return fchk();">
<input name="box_chk" type="checkbox" value="1" />박스1
<input name="box_chk" type="checkbox" value="2" />박스2
<input name="box_chk" type="checkbox" value="3" />박스3
<input name="box_chk" type="checkbox" value="4" />박스4
<input name="box_chk" type="checkbox" value="5" />박스5

<input type="submit" value=" 검색 " class="btngray" />
</form>

특정한 값을 직접 변수로 저장하고 싶은 경우에는

function fchk() {

   var selectedvalue = document.bbssearch.box_chk[3].value;

   alert(selectedvalue);

}

로 해서 확인해 볼 수 있다.

form 이름 bbssearch 밑에 input name 인 box_chk 의 배열값을 직접 적어준다.

jQuery checkbox 선택 개수 체크는 http://link2me.tistory.com/1448 참조하면 된다.