체크박스(checkbox) 모두 체크 기능 구현하기(자바스크립트 이용)

checkbox 처리를 할 때

'모두 체크' 버튼은 필수적으로 만들어 주는 것이 좋다!

자바스크립트를 사용하면 뚝딱 만들 수 있다.

다음과 같이 처리하면 된다!


<input type="checkbox" onclick="selectAll(this)" /> 모두 체크<br/>

<input type="checkbox" name="foo" value="box1"> Box1<br/>
<input type="checkbox" name="foo" value="box2"> Box2<br/>
<input type="checkbox" name="foo" value="box3"> Box3<br/>
<input type="checkbox" name="foo" value="box4"> Box4<br/>

<script>
function selectAll(source) {
    var checkboxes = document.getElementsByName('foo');
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = source.checked; // '모두 체크'에 체크가 되면 다 체크하고 아니면 다 해제하고!
    }
}
</script>