javascript - 'checkbox', 체크박스 모두체크 그리고 모두해제!

▶▷ 알아두면 좋은 것들

HTML-Form, BOM, event-onclick

이번글에서는 나열되어 있는 모든 체크박스를 체크하는 방법과 해제하는 방법에 대해서 알아볼까 합니다.

이를 제어하는 방법은 버튼을 통해서 이루어집니다.

우선, 다른말보다 소스를 보면서 설명토록 하겠습니다.

소스(Source)

<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 체크박스 '모두 체크' 및 '모두 해제' 하기</TITLE>
</HEAD>
<SCRIPT language="javaScript">
1. function check_onclick(){
  for(var i=0;i<document.frm1.length;i++){
       document.frm1.elements[i].checked=true;
  }
}

2. function clear_onclick(){
  for(var i=0;i<document.frm1.length;i++){
       document.frm1.elements[i].checked=false;
  }
}

</SCRIPT>
<BODY>

</BODY>
</HTML>

소스설명

소스다운 Doit.html

1. 모든 체크버튼 활성

function check_onclick(){
    for(var i=0;i<document.frm1.length;i++){
        document.frm1.elements[i].checked=true;
    }
}

- 이번 주제에 있어 꼭 필요한 옵션이 checked 입니다.

체크박스와 라디오박스에 공통적으로 존재하는 이 checked 옵션은 'true'와 'false' 두개의 값을 가지는데요,

보시면 알겠지만 'true'일 경우는 화면에서 해당 체크박스가 체크가 되고 'false'는 체크박스가 해제가 됩니다.

이 부분에서는 true값을 사용해서 버튼을 클릭시, 체크가 되도록 하였습니다.

위에 앞서, 폼(form)에 존재하는 각 요소마다 접근하기 위해서 이름이 아닌 배열-elements-로 접근하였습니다.

이름으로 접근하게 될 경우, 폼안의 요소가 적을 경우는 상관없지만, 많을 경우에는 코드가 쓸 데 없이 길어집니다.

※ 요소에 접근하는 방법은 여러가지가 존재하니 참고해주세요.^^

1. 모든 체크버튼 비활성

function clear_onclick(){
    for(var i=0;i<document.frm1.length;i++){
        document.frm1.elements[i].checked=false;
    }
}

- 위 설명과 동일합니다.

'checkbox', 체크박스 모두체크 그리고 모두해제!

단축키

Articles