▶▷ 알아두면 좋은 것들
이번글에서는 나열되어 있는 모든 체크박스를 체크하는 방법과 해제하는 방법에 대해서 알아볼까 합니다.
이를 제어하는 방법은 버튼을 통해서 이루어집니다.
우선, 다른말보다 소스를 보면서 설명토록 하겠습니다.
소스(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. 모든 체크버튼 활성
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. 모든 체크버튼 비활성
for(var i=0;i<document.frm1.length;i++){
document.frm1.elements[i].checked=false;
}
}
- 위 설명과 동일합니다.
'open', 새창을 열어보자!
'button', 클릭한 횟수 알아내기!