체크된 항목 모두 찾기

문제

선택된(체크된) checkbox 요소를 모두 찾고 싶다.

해결

:checked 가상 클래스 선택자를 사용하면 체크된 checkbox 요소를 모두 찾을 수 있다.

var checked = document.querySelectorAll("#checks input[type='checkbox']:checked");
for(var i=0; i<checked.length; i++){
    str += checked[i].value + " ";
}

:checked 선택자를 사용할 수 없다면 다음과 같이 input 요소에 먼저 접근한 후 타입과 체크여부를 확인하면 된다.

var inputs = document.querySelectorAll("#checks input");
for(var j=0; j<inputs.length; j++){
    if(inputs.item(j).type == "checkbox" && inputs.item(j).checked){
        str += inputs.item(j).value + " ";
    }
}

설명

:checked 가상 클래스 선택자는 유용하지만 사파리, 파이어폭스, 크롬, 오페라에서만 지원되고 IE8에서는 지원되지 않는다.