메뉴 건너뛰기

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
  1. <html>
  2.  <head>
  3.   <title> New Document </title>
  4.   <meta name="Generator" content="EditPlus">
  5.   <meta name="Author" content="">
  6.   <meta name="Keywords" content="">
  7.   <meta name="Description" content="">
  8.   <script>
  9.     function hobbyCheck( fm ){
  10.        var str="";
  11.  
  12.        //hobby항목에 선택된 value 출력하기
  13.        for(i=0; i< fm.hobby.length; i++ ){
  14.            //alert( fm.hobby[i].checked )
  15.            if( fm.hobby[i].checked ){
  16.               str += fm.hobby[i].value +" ";
  17.            }
  18.        }
  19.  
  20.        alert("당신의 취미는 " + str +" 입니다.");
  21.     }//함수끝
  22.  
  23.     function allCheck( fm ){
  24.       /*if(fm.all.checked){//전체선택이 선택되었다면
  25.          for(i=0; i< fm.hobby.length ; i++){
  26.             fm.hobby[i].checked = true;
  27.          }
  28.       }else{
  29.          for(i=0; i< fm.hobby.length ; i++){
  30.             fm.hobby[i].checked = false;
  31.          }
  32.       }*/
  33.  
  34.  
  35.      for(i=0; i< fm.hobby.length ; i++){
  36.         fm.hobby[i].checked = fm.all.checked;
  37.      }
  38.  
  39.      /*전체선택이 선택된(checekd) 경우에는 전체선택해제로 변경하고
  40.        해제된 경우에는 전체선택 으로 변경한다.
  41.      */
  42.      if(fm.all.checked){
  43.         document.getElementById("all").innerHTML ="전체해제";
  44.      }else{
  45.         document.getElementById("all").innerHTML ="전체선택";
  46.      }
  47.    
  48.     }//함수끝
  49.  
  50.  
  51.     function nationCheck(fm){
  52.       //선택된 나라 출력하기
  53.       for(i=0; i< fm.nation.length ; i++ ){
  54.           if(fm.nation[i].checked){
  55.              alert(fm.nation[i].value +"선택했음.");
  56.              break;//반복문 빠져나가라.
  57.           }
  58.       }
  59.  
  60.  
  61.     }//함수끝
  62.   </script>
  63.  </head>
  64.  
  65.  <body>
  66.  <form name="f">
  67.   <h2> 취미 선택</h2>
  68.   <input type="checkbox" name="all" value="all" onClick="allCheck(form)" />
  69.    <span id="all">전체선택</span>
  70.   <br/><br/>
  71.  
  72.   취미 :
  73.    <input type="checkbox" name="hobby" value="등산" /> 등산
  74.    <input type="checkbox" name="hobby" value="낚시" /> 낚시
  75.    <input type="checkbox" name="hobby" value="수영" /> 수영
  76.    <input type="checkbox" name="hobby" value="놀기" /> 놀기
  77.    <input type="checkbox" name="hobby" value="잠자기" /> 잠자기
  78.    <input type="checkbox" name="hobby" value="먹기" /> 먹기
  79.  
  80.    <input type="button" value="선택" onclick="hobbyCheck(form)"/>
  81.  
  82.    <hr color="red"/>
  83.  
  84.    나라선택 :
  85.    <input type="radio" name="nation" value="한국"/> 한국
  86.    <input type="radio" name="nation" value="미국"/> 미국
  87.    <input type="radio" name="nation" value="일본"/> 일본
  88.    <input type="radio" name="nation" value="중국"/> 중국
  89.    <input type="radio" name="nation" value="프랑스"/> 프랑스
  90.  
  91.    <input type="button" value="나라선택" onclick="nationCheck(form)"/>
  92. </form>  
  93.  </body>
  94. </html>

List of Articles
번호 제목 날짜 조회 수
107 예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar) 2015.06.19 10061
106 마우스 드래그, 오른쪽 팝업메뉴, 선택 막기 (IE11, 파이어폭스, 크롬 확인) 2015.06.19 8564
105 Checkbox : 체크박스 체크여부 확인 file 2015.06.19 19008
104 텍스트박스(input type = "text") 숫자 증가, 감소 시키기 - 쇼핑몰 주문 수량 file 2015.06.19 12276
103 정규식을 이용한 콤마(comma) 제거하기 2015.06.19 6804
102 정규식을 이용한 실시간 콤마(comma) 넣기 2015.06.19 7875
101 자바스크립트로 네트워크 연결 확인하기 (Navigator onLine Property) file 2015.06.19 6197
100 location.href 로 새창 여는 방법 (target=_blank 효과) 2015.06.19 9387
99 CheckBox 전체 선택 & 해제 2015.04.28 5580
98 선택(CheckBox) 된 Row 삭제 - 화면에서 추가된 Row 2015.04.28 13536
97 선택된 데이터 부모창에 넘기기 (iframe ☞ 부모창) 2015.04.28 6614
96 2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현 2015.04.06 8198
95 jquery 메뉴 - 아래로 한번에 전체가 펼처짐 file 2015.04.06 11698
94 자바스크립트 이벤트 목록입니다. ( javascript event ) 2015.04.06 5596
93 '레이블', 반복문을 제어하자! file 2015.02.03 5540
92 'Array', 배열 및 다차원 배열 선언에 대해 알아보자! 2015.02.03 11103
91 배열의 리터럴 선언, 또다른 배열 선언 방법! 2015.02.03 6408
90 '문자 ↔ 숫자', 타입을 바꿔보자! 2015.02.03 6207
89 드롭다운 메뉴를 만들어보자! -1탄 file 2015.02.03 8168
88 'onmouseover', 마우스 오버 효과 - 글씨 바꾸기! file 2015.02.03 9431
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved