활용예제 : 체크박스 전체선택 전체해제 /라디오버튼

by 조쉬 posted Mar 01, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

가 크게 작게 위로 아래로 댓글로 가기 인쇄
  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>
위로 아래로 댓글로 가기 인쇄