체크박스
체크박스, 옵션리스트, 라디오 버튼을 제어하는 함수들의 예제 소스를 모아두었습니다. 특히 다중 옵션리스트를 제어하는 예제도 있습니다.
체크박스의 경우 모두 체크하기 모두 체크 안하기 등에 대한 예제가 있습니다.
다중 옵션 리스트의 경우 3단계까지 가능한 예제이며, 1단에서 선택하면 2단은 자동으로 1단에 해당되는 항목만 보여주는 기능이 있는 예제입니다.
[1] 라디오/체크박스 버튼 작은 크기로 만들기(여백 없에기) [Preview]
가끔 여백이 너무 많이 생겨서 라이오 버튼의 크기를 줄이고 싶은 경우가 있습니다.
이때 스타일쉬트의 기능과 가로폭(width) 속성을 사용하면 원하는 크기로 줄일수 있습니다.
<input name=test type=radio style="width='7pt'">

여기서 7pt는 모두 아시겠지만 7point 크기 입니다.

작은 크기로는 버튼의 크기도 줄어들지만 크게하는 경우는 바깥쪽의 여백만 커집니다.
[2] 셀렉트 박스 3개를 선택해야만 하는 페이지 [Preview]
3개를 선택하고 "open"을 클릭하면 선택된 항목을 보여줍니다.

그리고 다른 페이지에 해당되는 항목에 대한 페이지를 불러오는 예제입니다.
[3] 3단계의 셀렉트를 제어하는 예제 [Preview]
3개의 셀렉트가 있고 각 단계별로 선택된 값에 의해 다음 셀렉트가 동적으로 변경되는 예제입니다.
[4] select 문에 있는것을 multiple select에 추가하는 예제 [Preview]
하나의 선택박스에서 선택하면 다른 선택박스에 추가는 예제
[5] 선택박스 select onchange 예제- text 값을 보여주는 [Preview]
선택박스의 보여주는 값 (text)을 선택시 보여주는 예제입니다.
[6] 선택박스 select onchange 예제- value 값을 보여주는 [Preview]
옵션안에 value로 지정된 값을 선택 내용이 변경될때마다 보여주는 예제입니다.

value 안에 웹 주소를 넣어 준다면 원하는 페이지로 바로 이동할 수 있습니다.
[7] 셀렉트로 다른 셀렉트 비활성화 시키기 [Preview]
선택 박스에서 하나의 자료를 선택하면 또 다른 선택 박스는 선택이 불가능하게
비 활성화 시키고 싶은 경우가 있습니다.

이때 이용할 수 있는 예제입니다.

소스를 다중셀렉트를 이용한것이라 불필요한 코드가 약간 있습니다만
정리해서 사용하시면 될겁니다.

[8] 체크박스를 클릭하면 입력값을 더해서 합을 보여주는 예제 [Preview]
체크박스(Checkbox)를 클릭하면 체크될때 값을 합산해서 합계난에 보여줍니다.
이미 체크되어 있는 경우에 클릭하면 값을 지우게 됩니다.

조금 더 응용한다면 각 항목에 커서가 위치하는 경우(새로운 값을 입력할때 마다)
합계부분을 지울수도 있고,
새로운값이 들어올때마다 계산을 다시해서 보여주는 방법도(onchange를 이용하면) 있습니다.
이때는 굳이 체크박스를 클릭할 필요도 없겠네요.
[9] 다중 셀렉트 (select)를 제어하는 소스입니다. [Preview]
처음 콤보리스트에서 항목을 선택하면 동적으로 두번째 콤보리스트의 항목이 바뀝니다.

예로 첫번째 select박스에서 스피커를 선택하면 그담 두번째 select박스에 스피커 종류가 쭉 나아고 모니터를 선택하면 모니터 종류가 나오고 이렇게 하고 싶은경우 응용할 수 있는 예제입니다.

[10] 체크박스에 지정된 번호에 해당하는 입력(input) 박스가 생성되는 예제입니다. [Preview]
숫자의 범위가 1-5까지인데 응용하시면 얼마든지 추가할 수 있습니다.
시마
[11] 체크박스 전부 선택하거나 전부 선택해제하기 [Preview]
버튼을 이용하는 법과 링크를 이용하는 방법 두가지를 이용해서
체크박스를 전부 선택하거나 또는 전부 해제하는 방법을 보여주는 예제 소스입니다.
[12] 롤오버 체크박스 [Preview]
체크박스가 롤오버 됩니다
[13] 체크박스를 클릭하면 입력박스에 커서가 위치하는 자스 예제 [Preview]
입력이 필요한 input 박스앞에 있는 체크박스를 클릭하면 input 박스에 focus가 주어지는 예제입니다.

이미 체크된 경우에는 다시 체크하면 focus를 없애는 기능입니다.

focus(), 와 blur() 함수 이해에 도움이 되는 예제입니다.

<html>
<head>
<title>test</title>

<SCRIPT LANGUAGE="JavaScript">
function set_txt1(){
if (document.testform.button1.checked) {
document.testform.txt1.focus();
[14] 체크한 버튼에 따라 폼 액션값 바꾸기 [Preview]
라디오버튼을 이용해서 1을 누르면 form1.html로 가고 2를 누르면 form2.html로 가게하고 싶은 경우,
즉, 라디오버튼 onclick할때 action에 다른 페이지를 넣고 싶은 경우 이용합니다.
[15] 연동하는 체크박스 체크하기 [Preview]
<html>
<head>
<title>test</title>

<SCRIPT LANGUAGE="JavaScript">
function set_sub(){
if (document.testform.button1.checked) {
document.testform.button11.checked = true;
document.testform.button12.checked = true;
}else{
document.testform.button11.checked = false ;
docum .....
[16] 체크박스를 클릭하면 입력박스에 커서가 위치하는 자스 예제 [Preview]
입력이 필요한 input 박스앞에 있는 체크박스를 클릭하면 input 박스에 focus가 주어지는 예제입니다.

이미 체크된 경우에는 다시 체크하면 focus를 없애는 기능입니다.

focus(), 와 blur() 함수 이해에 도움이 되는 예제입니다.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>test</title>

<SCRIPT LANGUAGE="JavaScript">
function set_txt1(){
if .....
[17] 라디오 버튼의 체크유무를 체크하는 자스입니다.(버튼갯수가 변할때 이용하면 유용) [Preview]
시험 문제를 낸다든지 할때 문제의 갰수가 변하는 경우가 있습니다
이때 사용할 수 있는 자스입니다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="javascript">
//alert('문제를 푸세요');

function validate() {
for (i = 1; i < 3 ; i++) {
if (eval("document.test.exam" + i)[0].checked == true ) .....
[18] 라디오 버튼 체크유무 알아내기 [Preview]
자료 입력시 라디오버튼으로 자료를 받는 경우가 있습니다.
유저가 라디오 버튼을 체크했는지를 알아내야 하는 경우.

아래의 함수를 쓰면 됩니다.
가령 남,여을 구분하는 라디오 버튼이라면 변수의 이름이 "sex"라면

자바스크립트안에서

if((document.form1.sex[0].checked == false && document.form1.sex[1].checked == false)) {
alert("남자도 여자도 아님, 호모인가?");
}


[19] listbox에서 링크를 이용하여 페이지 바꾸기 [Preview]
폼과 리스트박스와 자바스크립트를 사용해야 합니다.

예제코드입니다.
<form name="selecter">
<select name="LetGo" onchange="window.open(this.options
[this.selectedIndex].value,'_self')">
<option value="/asp/list.asp?code=1>리스트1</option>
<option value="/asp/list.asp?code=2>리스트2</option>
<option value="/asp/list.asp?code=3>리스트3</option>
</select>
</form>
.....
[20] 체크박스 체크여부 검사하기 [Preview]
페이지에 체크박스가 있는 경우
항상 한개 이상 체크가 되어야 하는 경우, 만약 아무것도
체크된게 없다면 체크하라는 메세지를 출력합니다.

<SCRIPT LANGUAGE="JavaScript">
<!--

function fcheck(rcount) {
var count=0;
if(rcount > 1) {
for( i=0;i<form2.chkboxname.length ;i++) {
if( form2.chkboxname[i].checked == true) count++; }
if(count==0) {
alert("위의 체크박스에 체크후 눌러주세요");
return false;
}
} .....
    [1] [2]    
Javascript Source List :