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

by 조쉬 posted Feb 03, 2015
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

▶▷ 알아두면 좋은 것들

HTML-Form, BOM, event-onclick 

 

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

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

 

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

 


소스(Source)

소스다운 Doit.html

 

<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>

<FORM name=frm1>
     <input type=button value=모두체크 onclick=check_onclick()>

    <input type=button value=체크해제 onclick=clear_onclick()><br>
     체크박스1 <input type=checkbox name=chck1 value="chck1"><br>
     체크박스2 <input type=checkbox name=chck2 value="chck2"><br>
     체크박스3 <input type=checkbox name=chck3 value="chck3"><br>
</FORM>

</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;
    }
}

- 위 설명과 동일합니다.