반응형
자바스크립트(javascript) Checkbox(체크박스) 객체의 뜻과 속성과 간단예제
체크 박스는 여러 개의 선택항목 중에서 하나 이상의 메뉴를 선택할 수 있다. 상태 변화는 체크가 되었다, 체크가 되지 않았다. 둘 중 하나의 상태를 표현할 수 있다.
이런 체크 박스의 체크 상태를 표현하는 속성은 Checked라는 속성이 있다.
다음은 Checkbox 객체의 속성이다.
속 성 |
내 용 |
checked |
Checkbox 객체의 상태 변화를 지정해주는데 선택했다면 true를, 선택하지 않았다면 false를 반환한다. |
name |
Checkbox 객체의 이름을 지정한다. |
type |
객체의 형태를 지정한다. |
value |
Checkbox에 할당하고 싶은 값을 지정한다. |
간단예제를 통해 체크박스 속성을 살펴보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>checkbox 를 이용한 예제</title> <script> /*function scheck(button){ alert(button.value+"을 눌렀군요.") }*/ </script> </head> <body> <h3>어떤 과목을 하고 싶은가요?</h3> <form action="nothingcgi"> 과목 검색 : <input type="text" name="subselect" size=20><p> 과목 선택 : <br> <ol> <li><input type="checkbox" name="korean" value="kor">언어 <li><input type="checkbox" name="english" value="eng">외국어 <li><input type="checkbox" name="math" value="mat" checked>수리 <li><input type="checkbox" name="science" value="sci">과학탐구 </ol> </form> </body> </html> | cs |
이번엔 선택한 체크 박스를 alert 대화상자에서 어떤 항목을 선택했는지 보여주는 예제이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>checkbox 를 이용한 예제</title> <script> function scheck(form) { var kebi = "" if (form.korean.checked == true) kebi += "언어를 선택했군요.\n" if (form.english.checked == true) kebi += "외국어를 선택했군요.\n" if (form.math.checked == true) kebi += "수리를 선택했군요.\n" if (form.science.checked == true) kebi += "과학탐구를 선택했군요.\n" alert(kebi) } </script> </head> <body> <h3>어떤 과목을 하고 싶은가요?</h3> <form action="nothingcgi"> 과목 검색 : <input type="text" name="subselect" size=20><p> 과목 선택 : <br> <ol> <li><input type="checkbox" name="korean" value="kor">언어 <li><input type="checkbox" name="english" value="eng">외국어 <li><input type="checkbox" name="math" value="mat" checked>수리 <li><input type="checkbox" name="science" value="sci">과학탐구 </ol> <input type="button" value="확인" onclick="scheck(this.form)"> </form> </body> </html> | cs |
이번엔 원래 체크박스의 메뉴에서 다른 메뉴로 바꾸었을 경우에 메시지를 처리해주는 defaultChecked 속성에 대해 알아보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>checkbox defaultChecked 를 이용한 예제</title> <script> function scheck(form) { var kebi = "" if (form.korean.checked != form.korean.defaultChecked) kebi += "언어 : 과목의 선택을 바꿨습니다.\n" if (form.english.checked != form.english.defaultChecked) kebi += "외국어 : 과목의 선택을 바꿨습니다.\n" if (form.math.checked != form.math.defaultChecked) kebi += "수리 : 과목의 선택을 바꿨습니다.\n" if (form.science.checked != form.science.defaultChecked) kebi += "과학탐구 : 과목의 선택을 바꿨습니다.\n" alert(kebi) } </script> </head> <body> <h3>어떤 과목을 하고 싶은가요?</h3> <form> 과목 검색 : <input type="text" name="subselect" size=20><p> 과목 선택 : <br> <ol> <li><input type="checkbox" name="korean" value="kor">언어 <li><input type="checkbox" name="english" value="eng">외국어 <li><input type="checkbox" name="math" value="mat" checked>수리 <li><input type="checkbox" name="science" value="sci">과학탐구 </ol> <input type="button" value="확인" onclick="scheck(this.form)"> </form> </body> </html> | cs |
반응형
'이전 게시글 > 컴퓨터#웹 Jv.Script' 카테고리의 다른 글
| 자바스크립트 radio(라디오버튼) 객체의 뜻과 속성과 간단예제 (0) | 2016.06.05 |
|---|---|
| 자바스크립트 FileUpload(파일업로드) 객체의 뜻과 간단예제 (0) | 2016.06.05 |
| 자바스크립트 Button(버튼) 객체의 간단예제 (라디오버튼) (0) | 2016.06.05 |
| 자바스크립트 Form 태그, 메소드, 핸들러 예제 (0) | 2016.05.15 |
| 자바스크립트 Form 객체의 태그와 속성, 메소드 (0) | 2016.05.15 |
