메뉴 건너뛰기

조회 수 4678 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

▶▷ 알아두면 좋은 것들

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

- 위 설명과 동일합니다.

 


List of Articles
번호 제목 날짜 조회 수
125 JDK6 (Java SE Development Kit 6)이하 버전 다운로드 주소 file 2016.09.11 3790
124 이클립스 실행할때 자신이 원하는 JDK 지정하는 방법 file 2016.09.11 3494
123 특정 HTML DOM 엘레멘트로 스크롤 이동하기 2016.09.08 4391
122 모바일 홈페이지로 자동 이동하는 방법.... 2016.09.01 4174
121 이동 가능한 레이어팝업 소스 2016.09.01 4306
120 jquery offset()을 이용한 부드러운 스크롤 이동 2016.09.01 4193
119 이벤트 - 페이지 로드 후 이벤트 처리하기 ( window.onload ) file 2015.06.19 4843
118 iframe사용시 높이 자동 조절 2015.06.19 3866
117 [라디오버튼 오류 체크] 간단한 문제 예제 file 2015.06.19 4313
116 자바스크립트 아이디 기억하기 기능 구현 (쿠키저장) file 2015.06.19 6349
115 공백 검사 함수 2015.06.19 5727
114 자바스크립트 API 문서 2015.06.19 6898
113 JSON API - JSON.parse(), JSON.stringify() ( json 형태의 문자열을 JSON객체로 , JSON객체를 문자열로 ) file 2015.06.19 3739
112 창 크기 최대화 시키기 file 2015.06.19 7280
111 예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그) file 2015.06.19 3767
110 Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성 file 2015.06.19 5209
109 창에 대한 정보얻기 (창 크기, 창 위치) file 2015.06.19 4297
108 핸드폰 번호 일부 마스킹크 작업 (정규식 이용) 2015.06.19 6434
107 예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar) 2015.06.19 6991
106 마우스 드래그, 오른쪽 팝업메뉴, 선택 막기 (IE11, 파이어폭스, 크롬 확인) 2015.06.19 5359
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 Next
/ 11

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved